부모와 자녀의 분리 된 터치 이벤트

Question

나는 내 웹 응용 프로그램에 jquery를 사용합니다. 터치 스크린 장치 용 데스크톱 브라우저 및 모바일 브로우저에 적합하도록하고 싶습니다.

<div class="well listItem element-div alert-error" data-state="removing"> 
    <strong>Item title</strong> <small>Items count</small> 
    <div class="pull-right" style="margin-top: -5px;"> 
     <a class="btn btn-success approve-button"><i class="icon-ok icon-white"></i></a> 
     <a class="btn btn-danger cancel-button"><i class="icon-remove icon-white"></i></a> 
    </div> 
</div> 

내가 .approve- 위해 (클릭하고 .listItem 클래스 (최상위 DIV) 모든 a 요소에 대한 동일한 이벤트에 대한 touchend 이벤트 잡을 :

나는 사업부, 그리고 그 안에 몇 가지 요소가 버튼 및 .cancel-button)을 사용하지만 'a'요소에서 데스크톱 브라우저를 클릭하면 올바르게 작동하고 iOS Safari 브라우저 또는 WindowsPhone InternetExplorer에서 'a'요소를 누르면, 상위 div하지만 'a'가 아닙니다. 부모 div에 대한 이벤트 리스너를 제거하면 'a'요소에 대한 이벤트가 모바일 브라우저에서 올바르게 작동합니다. parent-div 이벤트는 자유 공간을 터치 할 때 작동하고, 'a'요소를 터치하면 'a'이벤트 리스너 만 계속 진행하기를 원합니다. 그들을 어떻게 분리 할 수 ​​있는지 조언 해 주시겠습니까?

Answer 1

이벤트 대상을 확인하려고 했습니까?

$(".listItem").on("click", function(event){ 
    if (event.target === this) { 
    // clicked exactly on this element 
    } 
}); 

Answer 2

비슷한 문제가 있었는데 콘텐츠가 더 많이 중첩되었습니다. 과 같이하지 선택 : 당신은 를 사용하여 다른 이벤트를 처리 할 것으로 예상 지역 (그렇지 않으면 div의, 클래스 나)를 제외 할 jQuery로

<article> 
    <div class="title"> 
     <span class="title"></span> 
     <div class="buttons"> 
      <div class="minimize">+</div> 
      <div class="remove">x</div> 
     </div> 
    </div> 
    <div class="post"> 
     ... 
    </div> 
</article> 

:

$("article :not(.buttons, .minimize, .remove)").click(function (event) { 
    // toggle display value of div.post 
}); 

이 트리거 .buttons, .minimize 및 .remove 된 div를 제외하고 기사 아무 곳이나 클릭 이벤트.