중첩 된 jQuery Chrome 및 Firefox에서 다른 이벤트를 클릭하십시오.

이 코드를 사용하면 Firefox에서 버튼 클릭 만 경고합니다. Chrome의 경우 두 가지 경고가 모두 표시됩니다.중첩 된 jQuery Chrome 및 Firefox에서 다른 이벤트를 클릭하십시오.

클릭하면 (Firefox에서 무시되는) img에 의해 이벤트가 트리거되는 Chrome에서의 동작과 동일하게하고 싶습니다.

참고 : 내 실제 코드는 훨씬 길고 기능적입니다. 나에게 다른 곳에서 고통을주고있는 근본적인 행동을 분리하기 위해이 작은 코드 세트를 추출했다.

<html> 
    <head> 
     <script src="http://app.essets.com/system/application/js/jquery/jquery.js" type="text/javascript"></script> 
     <script type='text/javascript'> 
      $(document).ready(function() { 
       $('button').click(function(){ 
       alert('button clicked'); 
       }); 
       $('img').click(function(){ 
       alert('img clicked'); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <button type='button'> 
      <img id="1" class="moduleratingstar" src="http://app.essets.com/images/site/transactions.png"> 
      Some text 
     </button> 
    </body> 
</html>

출처

2012-09-04 Clint Brown

브라우저간에 Chrome의 동작을 재현 할 수 없을 것이라고 생각합니다. 사양에 대한 내용이 확실하지 않습니다.

그러나 버튼처럼 보이도록 스타일이 지정된 다른 HTML 요소를 사용하면 "가짜"버튼을 만들 수 있습니다. 이런 식으로 그러한 행동을 구현하는 것은 결코 쉬운 생각이 아닙니다.

Take a look at this fiddle.

출처

2012-09-04 19:17:46 Andre

사양에는 대화 형 콘텐츠가 포함될 수 없다고 명시되어 있습니다. 나는 이것이 클릭 핸들러를 가진 노드를 포함한다고 생각한다. 따라서 대부분의 브라우저는 클릭 핸들러를 찾을 때 버튼 안에 포함 된 노드를 무시합니다. 버튼 안에'a' 엘리먼트를 넣으려고하면 같은 문제가 나타날 것입니다. 링크를 클릭하는 것은 Chrome이나 Safari에서는 작동하지만 Firefox 나 IE에서는 작동하지 않습니다. – Barmar

그건 의미가 있습니다. 스타일이있는 div로 변경하겠습니다. 도와 줘서 고맙다. –

감사합니다, @Barmar. 완전성을 위해 오페라에서도 작동하지 않습니다. – Andre

중첩 된 jQuery Chrome 및 Firefox에서 다른 이벤트를 클릭하십시오.

답변

관련 문제