一个div根据业务实现不同点击事件,不同点击事件只有一个生效
时间: 2023-07-20 18:13:31 浏览: 46
您可以使用事件委托的方式来实现一个div根据业务实现不同点击事件,但只有一个生效。具体实现方式如下:
1. 首先,获取需要绑定点击事件的父元素,可以通过document.getElementById()或document.querySelector()方法来获取。
2. 然后,根据业务需求定义不同的点击事件处理函数,可以使用匿名函数或实名函数来定义。
3. 在父元素上绑定一个click事件,使用事件对象的target属性来判断用户点击的是哪个子元素。根据子元素的不同,选择执行相应的点击事件处理函数。
例如,在以下代码中,我们为id为"parent"的父元素绑定了一个click事件,判断用户点击的是哪个子元素,再执行相应的点击事件处理函数,只有一个事件会生效,您可以根据具体业务需求来定义这些函数:
```
<div id="parent">
<div class="child1">子元素1</div>
<div class="child2">子元素2</div>
</div>
<script>
var parent = document.getElementById("parent");
parent.addEventListener("click", function(event) {
var target = event.target;
if (target.classList.contains("child1")) {
alertMsg1();
} else if (target.classList.contains("child2")) {
alertMsg2();
}
});
function alertMsg1() {
alert("这是第一个业务处理函数");
}
function alertMsg2() {
alert("这是第二个业务处理函数");
}
</script>
```
当用户点击"子元素1"或"子元素2"时,只会触发相应的点击事件处理函数,另一个点击事件不会生效。