[JQUERY] 어떻게 부모 DIV에 만 불이 아니라 아이들 클릭 이벤트를하기?

어떻게 부모 DIV에 만 불이 아니라 아이들 클릭 이벤트를하기?

해결법

1. ---

   1.e.target이 같은 요소가있는 경우, 당신은 자손에 클릭하지했습니다.

   e.target이 같은 요소가있는 경우, 당신은 자손에 클릭하지했습니다.

   $ ( '.는 foobar'). ({), 기능 (예 '를 클릭'에 (e.target! ==이) 경우 반환; 경고 ( '는는 foobar를 클릭'); }); .foobar { 패딩 : 20 픽셀; 배경 : 노란색; } 스팬 { 배경 : 파란색; 색상 : 흰색; 패딩 : 8px; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> .foobar (경고)

   아이 (아무 경고)

2. ---

   2.만 대상으로 새로운 브라우저를 괜찮다면 작동하는 또 다른 방법이있다. 그냥 CSS를 추가

   만 대상으로 새로운 브라우저를 괜찮다면 작동하는 또 다른 방법이있다. 그냥 CSS를 추가

   pointer-events: none;
   

   사업부의 아이들에게 당신은 클릭을 캡처합니다. 여기에 지원 테이블입니다

   http://caniuse.com/#feat=pointer-events

3. ---

   3.나는 일을 허용 대답을하지 않았다, 그러나 이것은 적어도 바닐라 JS에서, 트릭을 할 것으로 보인다.

   나는 일을 허용 대답을하지 않았다, 그러나 이것은 적어도 바닐라 JS에서, 트릭을 할 것으로 보인다.

   if(e.target !== e.currentTarget) return;
   

4. ---

   4.당신은 당신의 호의에 버블 링을 사용할 수 있습니다 :

   당신은 당신의 호의에 버블 링을 사용할 수 있습니다 :

   $('.foobar').on('click', function(e) {
       // do your thing.
   }).on('click', 'div', function(e) {
       // clicked on descendant div
       e.stopPropagation();
   });
   

5. ---

   5.

   //bind `click` event handler to the `.foobar` element(s) to do work,
   //then find the children of all the `.foobar` element(s)
   //and bind a `click` event handler to them that stops the propagation of the event
   $('.foobar').on('click', function () { ... }).children().on('click', function (event) {
       event.stopPropagation();
       //you can also use `return false;` which is the same as `event.preventDefault()` and `event.stopPropagation()` all in one (in a jQuery event handler)
   });
   

   이벤트가 (자신의 이벤트 핸들러를 화재의를 .foobar 요소 (들)에 도달하지 않도록이 아이들 요소에 해당하는 경우에는 .foobar 요소 (들)의 (들)에 클릭 이벤트의 전파 (버블 링)를 중지합니다 ).

   여기 데모입니다 http://jsfiddle.net/bQQJP/

6. ---

   6.

   $(".advanced ul li").live('click',function(e){
       if(e.target != this) return;
       //code
       // this code will execute only when you click to li and not to a child
   })
   

7. ---

   7.저도 같은 문제를했고,이 솔루션을 함께했다 (다른 답변 기준)

   저도 같은 문제를했고,이 솔루션을 함께했다 (다른 답변 기준)

    $( ".newsletter_background" ).click(function(e) {
       if (e.target == this) {
           $(".newsletter_background").hide();
       } 
   });
   

   대상이 DIV 다음 다른 코드를 실행 아무것도하지 않는 경우 기본적으로 말한다 (숨길하지 않음)

8. ---

   8.내 경우는 비슷하지만 이것은 당신이 몇는 foobar-S를 가지고 있고, 당신은 단지 하나의 종료 할 때 기회입니다 - 한 번의 클릭 당 :

   내 경우는 비슷하지만 이것은 당신이 몇는 foobar-S를 가지고 있고, 당신은 단지 하나의 종료 할 때 기회입니다 - 한 번의 클릭 당 :

   $(".foobar-close-button-class").on("click", function () {
       $(this).parents('.foobar').fadeOut( 100 );
       // 'this' - means that you finding some parent class from '.foobar-close-button-class'
       // '.parents' -means that you finding parent class with name '.foobar'
   });
   

   $(".foobar-close-button-class").on("click", function () {
       $(this).child('.foobar-close-button-child-class').fadeOut( 100 );
       // 'this' - means that you finding some child class from '.foobar-close-button-class'
       // '.child' -means that you finding child class with name '.foobar-close-button-child-class'
   });
   

9. ---

   9.당신은 event.currentTarget를 사용할 수 있습니다. 이 이벤트를 얻었다에만 elemnt 클릭 이벤트를 할 것입니다.

   당신은 event.currentTarget를 사용할 수 있습니다. 이 이벤트를 얻었다에만 elemnt 클릭 이벤트를 할 것입니다.

   타겟 = E => { CONSOLE.LOG (e.currentTarget); };

11. ---

    10.당신은 포인터 이벤트를 사용할 수없는 경우 : 없음; 당신은 너무 같은 개체에 직접 클릭을 감지 composedPath를 사용할 수있는 최신 브라우저를 대상으로하고 있습니다 :

    당신은 포인터 이벤트를 사용할 수없는 경우 : 없음; 당신은 너무 같은 개체에 직접 클릭을 감지 composedPath를 사용할 수있는 최신 브라우저를 대상으로하고 있습니다 :

    element.addEventListener("click", function (ev) {
        if (ev.composedPath()[0] === this) {
            // your code here ...
        }
    })
    

    여기 composedPath에 대한 자세한 내용을보실 수 있습니다 : https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath

12. ---

    11.// 그 리 GET 값의 경우 document.getElementById를 ( '리').하여 addEventListener ({), 기능 (예 "를 클릭" 경우 (e.target == 이것을) { UodateNote (e.target.id); } }) UodateNote 함수 (E) { nt_id = document.createElement ( "DIV")를 보자; // 둑에 추가 컨테이너. document.body.appendChild (nt_id); nt_id.id = "안녕하세요"; // conatiner 값을 얻는다. nt_id.innerHTML는 전자 =; // 몸... CONSOLE.LOG (E); } 리 { 커서 : 포인터; 폰트 중량 : 굵은; 폰트 크기 : 20 픽셀; 위치 : 상대; 폭 : 380px; 높이 : 80 픽셀; 배경 색상 : 실버; 정당화 - 내용 : 센터; 정렬-항목 : 센터; 텍스트 정렬 : 센터; 여백 - 상단 : 0.5 ㎝; 국경 : 2 픽셀 고체 보라색; 경계 반경 : 12 %} 피{ 커서 : 텍스트를; 폰트 사이즈 : 16px; 폰트 중량 정상; 표시 : 블록; 최대 폭 : 370px; 최대 높이 : 40px; 오버 플로우 엑스 : 숨겨진;} <리튬 ID = "리튬">

    하이

    // 그 리 GET 값의 경우 document.getElementById를 ( '리').하여 addEventListener ({), 기능 (예 "를 클릭" 경우 (e.target == 이것을) { UodateNote (e.target.id); } }) UodateNote 함수 (E) { nt_id = document.createElement ( "DIV")를 보자; // 둑에 추가 컨테이너. document.body.appendChild (nt_id); nt_id.id = "안녕하세요"; // conatiner 값을 얻는다. nt_id.innerHTML는 전자 =; // 몸... CONSOLE.LOG (E); } 리 { 커서 : 포인터; 폰트 중량 : 굵은; 폰트 크기 : 20 픽셀; 위치 : 상대; 폭 : 380px; 높이 : 80 픽셀; 배경 색상 : 실버; 정당화 - 내용 : 센터; 정렬-항목 : 센터; 텍스트 정렬 : 센터; 여백 - 상단 : 0.5 ㎝; 국경 : 2 픽셀 고체 보라색; 경계 반경 : 12 %} 피{ 커서 : 텍스트를; 폰트 사이즈 : 16px; 폰트 중량 정상; 표시 : 블록; 최대 폭 : 370px; 최대 높이 : 40px; 오버 플로우 엑스 : 숨겨진;} <리튬 ID = "리튬">

    하이

from https://stackoverflow.com/questions/9183381/how-to-have-click-event-only-fire-on-parent-div-not-children by cc-by-sa and MIT license