从div的内部和外部调用不同的函数

I am having a div inside a div. And I want to call a function on the click of outer div and another function on the click of inner div. Is it possible to do so?

我在div里面有一个div。我想在外部div的点击上调用一个函数,在内部div的点击上调用另一个函数。有可能这样做吗?

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

2 个解决方案

#1

Yes, this is very much possible. And the code you have will get the job done.

是的,这是非常有可能的。你拥有的代码将完成工作。

NOTE: You need to add event.stopPropagation() in case you want to prevent the bubbling of the event from the inner function.

注意:您需要添加event.stopPropagation(),以防止您想要阻止事件从内部函数冒泡。

Try this out:

试试这个:

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>

#2

Yes, it is; one way to do it is the way you've done it in your question, except:

是的;一种方法是在你的问题中完成它的方式,除了:

You need quotes around the inner onclick attribute value, just as you have around the outer onclick attribute value.

您需要围绕内部onclick属性值的引号,就像您在外部onclick属性值周围一样。
You probably want to pass event into at least the inner one:

您可能希望将事件传递到至少内部事件:
```
<div onclick="function2(event)"></div>
```
and then have it call stopPropagation on that:

然后让它调用stopPropagation:
```
function function2(event) {
    event.stopPropagation();
}
```
so that the click event isn't propagated to the parent (doesn't bubble any further). If the click bubbles, function1 will be called as well.

这样点击事件不会传播到父级(不再冒泡)。如果点击气泡,也会调用function1。

Example:

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>

You might also consider modern event handling rather than onxyz-attribute-style event handlers; search for examples of addEventListener for details; my answer here also has a useful workaround for obsolete browsers.

您也可以考虑使用现代事件处理而不是onxyz-attribute-style事件处理程序;搜索addEventListener的示例以获取详细信息;我的答案也为过时的浏览器提供了有用的解决方法。

#1