jQuery 이벤트 버블 링이 Firefox에서 예상대로 작동하지 않습니다.

Question

<button> 요소가 있는데이 요소 안에 2 <span> 요소가 있습니다. 각 span 요소에 대해 2 개의 jquery click 이벤트 핸들러가 첨부되어 있으므로 각 클릭에 대해 원하는대로 할 수 있습니다. 여기에 기본 코드의 빠른 모습입니다 :

HTML은

<button> 
    <span>Text1</span> 
    <span>Text2</span> 
</button> 

자바 스크립트

$(function() { 
    $('button').bind('click', function() { 
     console.log('button clicked'); 
    }); 
    $('button > span:eq(0)').bind('click', function() { 
     console.log('text1 span clicked'); 
    }); 
    $('button > span:eq(1)').bind('click', function() { 
     console.log('text2 span clicked'); 
    }); 
}); 

이 크롬에서 모든 작업 괜찮와 클릭 이벤트가 올바른 순서로 캡처 : 먼저 span 요소 중 하나를 클릭 한 다음 이벤트가 상위 단추 요소까지 거품을냅니다.

문제는 Firefox에서 click 이벤트가 span 요소에 대해 실행되지 않는다는 것입니다. 버튼 이벤트 핸들러는 이벤트가 시작되는 것으로 기록합니다. http://jsfiddle.net/spider/RGL7a/2/

감사

Answer 1

을 간단한 해결책은 버튼 요소 대신 <div> 요소를 사용하는 것입니다 : 당신이 무슨 뜻인지 볼 수 있도록

는 여기에 바이올린입니다. 해고 할 공통 코드를 함수에 넣은 다음 스팬의 고유 코드와 함께 스팬 중 하나를 클릭하면 함수를 실행합니다. 당신이 더 많은 508을 준수하고 싶었다면 당신은 FF의 이벤트 처리 설명하지 않습니다, 분명히. <a> 태그 (또는 <button> 태그에

를 스팬을 만들 수 있지만 갈 수있는 빠른 방법 일 수 있습니다.

Answer 2

<button> to <button type="button"> 

이것은 박쥐 문제를 해결해야 변경해보십시오. 그 이유는 작동하지 자사가 제출하는 버튼의 기본 액션을 통해 다음과 같은 때문이다. 즉, 버튼이 자바 스크립트에서 false를 반환해야 귀하의 클릭을 읽기 위해서입니다. 마치 당신이 out을 false로 반환하는 기본 동작을 설정합니다.

다음 j 줄 코드 줄을 js에 추가하면 문제도 해결됩니다. 버튼> 스팬 클릭 바인딩 전에 코드를 추가해야합니다.

 <script type="text/javascript"> 
     $(function() { 
      $('button').click(function(){ 
       return false 
      }); 
     }); 
    </script>   

희망이 있습니다.

-D