Question

这可能被问过一千次，但我无法找到答案......

以下是一个例子：

＆＃13;

var div = $('.div');
div.on('click', function(e) {
  e.stopPropagation();
  e.preventDefault();
  div.toggleClass('red');
});

＆＃13;

.div {
  width: 50vh;
  height: 50vh;
  background: #eee;
}
.red {
  background: red;
}

＆＃13;

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

＆＃13;

问题：点击链接（任何内容）时触发事件。

我希望保留该事件，但避免在点击/选择内容/其他内容时。我有什么选择？

由于

Answer 1

你只需要设置一个＆＃34;点击＆＃34; div.div的任何子元素的事件处理程序，用于阻止该事件冒泡到任何祖先元素。这可以使用 * (universal) CSS selector 。

完成

除非你有理由说明你没有在这里描述，否则你不需要：

e.stopPropagation();
e.preventDefault();

在div事件处理程序中。

＆＃13;

var div = $('.div');
div.on('click', function(e) {
  div.toggleClass('red');
});

// When any child element of the div with class .div is clicked...
$("div.div > *").on("click", function(evt){
  // Don't allow the event to bubble up to the ancestor elements
  evt.stopPropagation();
  console.log("You clicked some child element of the div, but the event won't bubble up to it.");
});

＆＃13;

.div {
  width: 50vh;
  height: 50vh;
  background: #eee;
}
.red {
  background: red;
}

＆＃13;

<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>
  <span>Clicking me will do nothing</span>
</div>

＆＃13;

保持活动，但避免链接（或内部内容）

1 个答案: