Question

如果这已经存在，我很抱歉，但我无法找到类似的东西。我的愚蠢问题是：

我有一个可点击的容器，里面的链接看起来有点像：

<div onclick="someFunction()">
    <...>
    <...>
    <button onclick="otherFunction()">
</div>

我希望能够点击容器中的任何位置并打开一些东西，但我也希望能够让按钮进入工作状态。我对所有提前协助表示赞赏，并为这个愚蠢的问题道歉。

Answer 1

您应该使用event.stopPropogation（）函数。这将防止事件冒泡到父元素

otherFunction() {
  event.stopPropagation()
  // your code here
}

Answer 2

它会像你想象的那样工作，当你点击按钮时，点击将同时触发你的按钮以及div检查代码

event.stopPropagation（）

＆＃13;

var someFunction = function(event){
  alert('<someFunction>');
  
}

var otherFunction = function(event){
  alert("otherFunction ->");
}

var otherFunctionStopPropagation = function(event){
  alert("|otherFunction|");
  event.stopPropagation();
}

＆＃13;

.Some{
  height:200px;
  background-color:yellow;
  z-index:1;
  
}

.other{
  z-index:2;
}

＆＃13;

<div onclick="someFunction()" class="Some">
  <button onclick="otherFunction(event)"  class='other' id='other'>otherFunction</button>
  <button onclick="otherFunctionStopPropagation(event)"  class='other' id='other'>otherFunctionStopPropagation</button>

  <a onclick="otherFunctionStopPropagation(event)" href='' class='other' id='other'>a_otherFunctionStopPropagation</a>
</div>

＆＃13;

https://codepen.io/mastersmind/pen/EbLEBb

带有内部链接的可点击容器

2 个答案: