js addEventListener 鼠标事件类型汇总

Event NameFired WhenauxclickA pointing device button (ANY non-primary button) has been pressed and released on an element.click (en-US)在元素上按下并释放任意鼠标按键。contextmenu (en-US)右键点击（在右键菜单显示前触发）。dblclick (en-

子燕若水

7272人浏览 · 2021-12-02 21:33:02

子燕若水 · 2021-12-02 21:33:02 发布

Event Name	Fired When
`auxclick`	A pointing device button (ANY non-primary button) has been pressed and released on an element.
`click (en-US)`	在元素上按下并释放任意鼠标按键。
`contextmenu (en-US)`	右键点击（在右键菜单显示前触发）。
`dblclick (en-US)`	在元素上双击鼠标按钮。
`mousedown (en-US)`	在元素上按下任意鼠标按钮。 The `mousedown` event is fired at an Element when a pointing device button is pressed while the pointer is inside the element. 支持bubble
`mouseenter (en-US)`	指针移到有事件监听的元素内。当指针设备（通常是鼠标）被移动以使其热点位于触发事件的元素内时，将在元素上触发 mouseenter 事件。不支持bubble
`mouseleave (en-US)`	指针移出元素范围外(与mouseenter相反)（不冒泡）。
`mousemove (en-US)`	指针在元素内移动时持续触发。鼠标光标的热点位于其(target)中时移动。(支持bubble)
`mouseover (en-US)`	指针移到有事件监听的元素或者它的子元素内。a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements.(支持bubble)
`mouseout (en-US)`	指针移出元素，或者移到它的子元素上。(与mouseover相反)(支持bubble)
`mouseup (en-US)`	在元素上释放任意鼠标按键。a button on a pointing device (such as a mouse or trackpad) is released while the pointer is located inside it.(支持bubble)
`pointerlockchange (en-US)`	鼠标被锁定或者解除锁定发生时。
`pointerlockerror (en-US)`	可能因为一些技术的原因鼠标锁定被禁止时。
`select (en-US)`	有文本被选中。
`wheel (en-US)`	滚轮向任意方向滚动。

实际项目中的例子:

<script>
    var pf1 = document.getElementById("pf1");

    pf1.addEventListener("mousedown", function(evt) {
        window.parent.postMessage("mousedown:" + evt.target.getAttribute('name'), "*")
    });

    pf1.addEventListener("mouseup", function(evt) {
        window.parent.postMessage("mouseup:" + evt.target.getAttribute('name'), "*")
    });

    window.addEventListener("message", (event) => {
        if(event.data.startsWith('mousedown:')){
            let click_name = event.data.replace('mousedown:', '');
            let item_list = document.getElementsByName(click_name);
            for (const item of item_list) {
                item.style.backgroundColor = "#FDFF47";
            }
        }
        if(event.data.startsWith('mouseup:')){
            let click_name = event.data.replace('mouseup:', '');
            let item_list = document.getElementsByName(click_name);
            for (const item of item_list) {
                item.style.backgroundColor = "";
            }
        }
    }, false);
</script>