Question

I use jquery for my web application. I want it to be correct for desktop browsers and mobile brousers for touchscreen devices.

I have a div, and some elements inside it:

    <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>

I catch click and touchend event for .listItem class (top-level div) and same events for every a element (for .approve-button and .cancel-button), but when I’m click on desktop browser on ‘a’ element, it works correct, and when I am pressing on ‘a’ element in iOS Safari browser, or WindowsPhone InternetExplorer, works only event for parent div, but not for ‘a’. If I remove event listener for parent div, events for ‘a’ elements works correct in mobile browsers. I want parent-div event works when I touch a free space of it, and when I touch ‘a’ element – I want only ‘a’ event listener to go on. Can you advise me how to separate them?

Answer 1

Have you tried to check event target?

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