Question

我在处理clcik事件时遇到问题。我有一个div和一个链接。我想禁用链接，而是在点击div的地方应该执行一个函数。因此，为了禁用链接，只要单击链接，我就会返回false但同时我想要的是当单击链接时仍然会执行父div。这是我的代码和小提琴链接：

$(".div").click(function(){
   alert("Hello");

});

$("a").click(function(e){
   return false;

});

fiddle

正如您所看到的，如果我点击div中的任何位置，它会起作用，但链接存在的区域除外。

任何人都可以帮助我吗？

******************* UPDATE *************************** ********

所以无论在哪里，每次点击任何地方都应该执行警告

Answer 1

是

改变这个：

$("a").click(function(e){
  return false;
});

到此：

$("a").click(function(e){
  $(".div").click();
  return false;
});

Answer 2

你不应该在事件的回调函数中return false，它会导致阻止冒泡。这就是不在父母上触发点击事件的原因。

要防止在a点击时重定向，您应该阻止默认行为，如下所示：

$("a").click(function(e) {
    e.preventDefault();
});

检查代码段：

$(".div").click(function(){
   alert("Hello");
});

$("a").click(function(e) {
   e.preventDefault();
});

.div {
  width: 300px; 
  height: 300px; 
  display: block; 
  background: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
  <a href="http://google.com">link</a>
</div>

Answer 3

您不应该为链接返回false preventDefault（如果调用此方法，则不会触发事件的默认操作。）

来自jQuery事件处理程序的

return false实际上与调用传递的e.preventDefault和e.stopPropagation相同 jQuery.Event 对象

$(".div").click(function(){
alert("Hello");
});

$("a").click(function(e){
e.preventDefault();
});

Answer 4

尝试使用pointer-events: none; css属性，而不使用$("a").click()事件。

a.disabled{
  color: #fff;
  pointer-events: none;
}

https://jsfiddle.net/5n1kpcsp/4/

虽然链接不可用，但父点击对子链接不起作用

4 个答案: