js点击事件

Posted 2023-03-02

两个Box（div），是父子关系，都拥有点击事件，当我在子盒子点击时，不弹起鼠标，移动鼠标到父级盒子区域时，鼠标弹起，触发的是父级点击事件，而不是子级点击事件，是因为什么原因。有什么办法解决吗？不想用变量判断

在javascript中，可以为某个元素指定事件，指定的方式有以下三种：
1、在html中，使用onclick属性
2、在javascript中，使用onclick属性
（1）注意函数名没有双引号。
3、在javascipt中，使用addEvenListener()方法

三种方法的比较
（1）在第二、三种方法中，可以向函数传入一个event对象，并读取其相应属性，而方法一不可以。

一些语法细节
（1）在第一种方法中，onclick大小写无关，但在第二种方法中，必须使用小写。因为HMTL对大小写不敏感，而JS则会区分大小写。
（2）在第二、三种方法中，指定函数名时没有双引号，而第一种作为一个HTML属性，需要双引号。
（3）第一种方法需要括号，第二、三种不需要。
onclick="clickHandler()"
document.getElementById("jsOnClick").onclick = clickHandler2;
document.getElementById("adEventListener").addEventListener("click",clickHandler2); 参考技术A “点击”（click）是由一系列动作（主要是鼠标按下和弹起）构成的，并最终以鼠标按键弹起瞬间鼠标指针所在的坐标为准，因此会造成鼠标按下和弹起不在同一元素内造成事件触发对象不是预期对象的问题。
可以改用“鼠标按下”（mousedown）事件，这样的话，只要鼠标一按下事件就触发，后面的鼠标移动和弹起就不再触发事件了，也就不会造成干扰了。
此外，还可以利用“事件委托”机制，即子盒子不绑定事件，只在父盒子绑定事件，然后父盒子根据target属性来判断事件触发对象。这也是目前流行的做法，因为即使子盒子有成千上万个，也只需要在父盒子绑定一个事件即可，无需在每个子盒子逐一绑定事件，这样可以极大提高运行效率。