html中的⿏标事件怎么写,html5中的⿏标事件以及⿏标事件属
性
⿏标事件
先列出html5中⿏标常见的⼀系列事件：
事件名称
描述
onclick
当单击⿏标时运⾏脚本
ondblclick
当双击⿏标时运⾏脚本
ondrag
当拖动元素时运⾏脚本
ondragend
当拖动操作结束时运⾏脚本
ondragenter
当元素被拖动⾄有效的拖放⽬标时运⾏脚本
ondragleave
当元素离开有效拖放⽬标时运⾏脚本
ondragover
当元素被拖动⾄有效拖放⽬标上⽅时运⾏脚本
ondragstart
当拖动操作开始时运⾏脚本
ondrop
当被拖动元素正在被拖放时运⾏脚本
onmousedown
当按下⿏标按钮时运⾏脚本
onmousemove
当⿏标指针移动时运⾏脚本
onmouseout
当⿏标指针移出元素时运⾏脚本
onmouseover
div border属性当⿏标指针移⾄元素之上时运⾏脚本
onmouseup
当松开⿏标按钮时运⾏脚本
onmousewheel
当转动⿏标滚轮时运⾏脚本
onscroll
当滚动元素滚动元素的滚动条时运⾏脚本
下⾯的例⼦实现了部分⿏标事件：
div { width: 30px;border: 1px solid gray; height: 30px;background-color: coral;}
onclick = "myclick()"
οndblclick="mydblclick()"
οnmοuseenter="mymouseEnter()"
οnmοusedοwn="mymousesDown()"
οnmοuseup="mymouseUp()"
>
function myclick(){
console.log("我被点了⼀下！")
}
function mydblclick(){
console.log("我被点了两下！")
}
function mymouseEnter(){
console.log("我的⿏标移进来了！")
}
function mymousesDown(){
console.log("我的⿏标点下去了！")
}
function mymouseUp(){
console.log("我的⿏标松开了！")
}
运⾏以上代码，可以发现如下⼏个问题：
ondblclick表⽰双击，触发这个函数时，同时也执⾏了两次 onclick ⿏标单击函数。
在上述例⼦中，双击元素会输出： 我被点了⼀下！我被点了⼀下！我被点了两下！
onclick事件是 onmousedown事件和onmouseup事件的结合体。实际上onclick事件是在onmouseup事件触发后再触发；单击元素，先输出： 我的⿏标松开了！，再输出：我被点了⼀下！
⿏标事件属性
在使⽤⿏标事件函数时可以往函数中传⼊event参数，event代表⿏标的事件对象。
例如：
div { width: 30px;border: 1px solid gray; height: 30px;background-color: coral;} function myclick(event){
console.log(event)
}
运⾏页⾯，单击元素，在控制台中可见：
MouseEvent对象
对象中常见属性介绍：
属性
描述
clientX
返回⿏标位置相对于浏览器窗⼝左上⾓的⽔平坐标
clientY
返回⿏标位置相对于浏览器窗⼝左上⾓的垂直坐标
offsetX
返回⿏标位置距离事件作⽤对象左侧边缘的⽔平距离
offsetY
返回⿏标位置距离事件作⽤对象左侧边缘的垂直距离
pageX
返回⿏标位置距离⽂档左侧边缘的距离
pageY
返回⿏标位置距离⽂档顶部的距离
altKey
⿏标事件发⽣时是否按下了alt键，返回为bool值
ctrlKey
⿏标事件发⽣时是否按下了ctrl键，返回为bool值
metaKey
⿏标事件发⽣时是否按下了meta键，返回为bool值
shiftKey
⿏标事件发⽣时是否按下了shift键，返回为bool值
其他的可以⾃⼰点开看看，输出试试；
举例：
div { width: 30px;border: 1px solid gray; height: 30px;background-color: coral;} function myclick(event){
console.log(event)
console.log("触发事件的dom元素的ID："+event.target.id)
console.log("事件类型："+pe)
}
结果如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。