Question

我在div里面有一个div。我想在外部div的点击上调用一个函数，在内部div的点击上调用另一个函数。是否可以这样做？

<div onclick="function1()">
<div onclick=function2()></div>
</div>

Answer 1

是的，这很有可能。你拥有的代码将完成工作。

注意：如果您想要阻止事件从内部函数冒泡，您需要添加event.stopPropagation()。

试试这个：

function function1() {
  console.log("From outer div");
}

function function2(event) {
  console.log("From inner div");
  event.stopPropagation();
}

#outer-div {
  width: 100px;
  height: 100px;
  background: yellow;
}

#inner-div {
  width: 50px;
  height: 50px;
  background: red;
  position: relative;
  top: 25px;
  left: 25px;
}

<div id="outer-div" onclick="function1()">
  <div id="inner-div" onclick="function2(event)"></div>
</div>

Answer 2

是的，它是;一种方法是在你的问题中完成它，除了：

内部onclick属性值周围需要引号，就像外部onclick属性值一样。
您可能希望将event传递到至少内部：
```
<div onclick="function2(event)"></div>
```
然后让它调用stopPropagation：
```
function function2(event) {
    event.stopPropagation();
}
```
以便click事件不会传播到父级（不再冒泡）。如果点击气泡，也会调用function1。

示例：

function function1() {
  console.log("function1 called");
}
function function2(event) {
  event.stopPropagation();
  console.log("function2 called");
}

<div onclick="function1()">
<div onclick="function2(event)">this div fires function2</div>
clicking here will fire function1
</div>

您也可以考虑使用现代事件处理而不是onxyz - 属性样式的事件处理程序;搜索addEventListener的示例以获取详细信息;我的回答https://github.com/requests/httpbin/issues/340也为过时的浏览器提供了有用的解决方法。

从div

2 个答案: