Question

我正在尝试处理.click操作但从中排除链接，以便您可以点击元素中的链接而不会触发.click。

我不知道该怎么做。我尝试过z-indexes，position：absolute，relative，但没什么用。

<style>
div {
background: yellow;
height: 200px;
}
</style>
<script>
$(window).load(function(){
   $(function() {
      $( "div" ).click(function() {
          alert( "Click handler." );
      });
   });
});  
</script>
</head>
<body>
    <div>
        <a target="_blank" href="http://stackoverflow.com/">Link</a>
    </div>
</body>
</html>

http://jsfiddle.net/KwAE7/

有任何帮助吗？谢谢！

Answer 1

检查点击的元素是否为锚点

$(function() {
  $( "div" ).click(function(e) {
      if (e.target.tagName.toLowerCase() != 'a')
          alert( "Click handler." );
  });
});

或阻止来自锚点的点击传播到父元素

$(function() {
  $( "div" ).click(function(e) {
       alert( "Click handler." );
  });

  $('a').click(function(e) {
      e.stopPropagation();
  })
});

或检查点击的元素是锚点，还是锚点

$(function() {
  $( "div" ).click(function(e) {
       if (! $(e.target).closest('a').length)
           alert( "Click handler." );
  });
});

Answer 2

你可以检查'currentTarget'和'target'，currentTarget就是你放置绑定的对象，'target'是被点击的元素，可以是你div中的任何元素。这样，您将确保仅在点击位于div中时才会触发事件。

http://jsfiddle.net/hBLF9/

$(function() {
    $('div').bind('click', function(ev) {
        if($(ev.currentTarget).get(0) == $(ev.target).get(0)) {
            alert('clicked');
        };
    });
 });

Answer 3

$(function () {
    $("div").click(function (e) {
        if (!$(e.target).closest('a').length) {
            alert("Click handler.");
        }
    });
});

演示：Fiddle

Answer 4

$( "div" ).click(function( e ) {
    if(e.target.tagName=="A") e.preventDefault();
    alert( "Click handler." );
});

如何从.click句柄中排除链接

4 个答案:

demo