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 事件。不支持bubblemouseleave (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>