长沙建站公司模板,九江网站设计服务机构哪家好,wordpress获取文章目录id,网站建设规划方案制作前面的话 鼠标事件是DOM事件中最常用的事件#xff0c;jQuery对鼠标事件进行了封装和扩展。本文将详细介绍jQuery鼠标事件 类型 鼠标事件共10类#xff0c;包括click、contextmenu、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter和mouseleave c…前面的话 鼠标事件是DOM事件中最常用的事件jQuery对鼠标事件进行了封装和扩展。本文将详细介绍jQuery鼠标事件 类型 鼠标事件共10类包括click、contextmenu、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter和mouseleave click 当用户按下并释放鼠标按键或其他方式“激活”元素时触发
contextmenu 可以取消的事件当上下文菜单即将出现时触发。当前浏览器在鼠标右击时显示上下文菜单
dblclick 当用户双击鼠标时触发
mousedown 当用户按下鼠标按键时触发
mouseup 当用户释放鼠标按键时触发
mousemove 当用户移动鼠标时触发
mouseover 当鼠标进入元素时触发
mouseout 当鼠标离开元素时触发
mouseenter 类似mouseover但不冒泡
mouseleave 类似mouseout但不冒泡 写法 以上10类鼠标事件都有对应的写法。下面以click()事件为例来说明鼠标事件的写法
【1】click(handler(eventObject)) click()事件是bind()事件的简写形式可以接受一个事件处理函数作为参数 script srchttp://cdn.bootcss.com/jquery/1.12.4/jquery.min.js/script
div idbox styleheight:30px;width:200px;border:1px solid black/div
script
$(#box).click(function(){
$(this).css(background,lightblue)
})
/script stylewidth: 100%; height: 50px; srchttps://demo.xiaohuochai.site/jquery/mouse/m1.html frameborder0 width320 height240
【2】click([eventData],handler(eventObject)) click()事件可以接受两个参数第一个参数传递数据第二个参数是处理函数 script srchttp://cdn.bootcss.com/jquery/1.12.4/jquery.min.js/script
div idbox styleheight:30px;width:200px;border:1px solid black/div
script
$(#box).click(123,function(event){
alert(event.data);
})
/script stylewidth: 100%; height: 50px; srchttps://demo.xiaohuochai.site/jquery/mouse/m2.html frameborder0 width320 height240
【3】click() click()事件不带参数时变成click()方法是trigger(click)的简写形式 script srchttp://cdn.bootcss.com/jquery/1.12.4/jquery.min.js/script
button idbtn1按钮一/button
button idbtn2按钮二/button
script
$(#btn1).on(click,function(){
alert(1);
});
$(#btn2).on(click,function(){
$(#btn1).click();
});
/script stylewidth: 100%; height: 40px; srchttps://demo.xiaohuochai.site/jquery/mouse/m3.html frameborder0 width320 height240
合成事件 jQuery事件对鼠标事件进行了扩展自定义了两个合成事件——hover()和toggle() [注意]toggle()事件已经在jQuery1.8版本删除
hover() hover(enter,leave)事件用于模拟光标悬停事件。鼠标移入时触发第一个函数参数鼠标移出时触发第二个函数参数 hover()事件实际上是mouseenter事件和mouseleave事件的集合 script srchttp://cdn.bootcss.com/jquery/1.12.4/jquery.min.js/script
div idbox styleheight:30px;width:200px;border:1px solid black/div
script
$(#box).on(mouseenter,function(event){
$(this).css(background-color,lightblue);
})
$(#box).on(mouseleave,function(event){
$(this).css(background-color,transparent);
})
/script stylewidth: 100%; height: 50px; srchttps://demo.xiaohuochai.site/jquery/mouse/m4.html frameborder0 width320 height240 用hover()事件实现如下 script srchttp://cdn.bootcss.com/jquery/1.12.4/jquery.min.js/script
div idbox styleheight:30px;width:200px;border:1px solid black/div
script
$(#box).hover(function(){
$(this).css(background-color,lightblue);
},function(){
$(this).css(background-color,transparent);
})
/script stylewidth: 100%; height: 50px; srchttps://demo.xiaohuochai.site/jquery/mouse/m5.html frameborder0 width320 height240 当hover()事件只有一个参数时该参数为mouseenter和mouseleave事件共同的函数 style
.active{background-color:lightblue;}
/style
script srchttp://cdn.bootcss.com/jquery/1.12.4/jquery.min.js/script
div idbox styleheight:30px;width:200px;border:1px solid black/div
script
$(#box).hover(function(){
$(this).toggleClass(active)
})
/script stylewidth: 100%; height: 50px; srchttps://demo.xiaohuochai.site/jquery/mouse/m6.html frameborder0 width320 height240
toggle()[已删除] toggle()事件用于模拟鼠标连续单击事件。第1次单击触发第1个函数参数第2次单击触发第2个函数函数如果有更多函数则依次触发直到最后一个。随后的每次单击都重复对这几个函数轮番调用 鼠标按键 事件对象event的which属性用于区分哪个键被按下敲击鼠标左键which的值是1敲击鼠标中键which的值是2敲击鼠标右键which的值是3 script srchttp://cdn.bootcss.com/jquery/1.12.4/jquery.min.js/script
div idbox styleheight:30px;width:200px;border:1px solid black/div
script
$(#box).mousedown(function(event){
alert(event.which)
})
/script stylewidth: 100%; height: 50px; srchttps://demo.xiaohuochai.site/jquery/mouse/m7.html frameborder0 width320 height240
修改键 在按下鼠标时键盘上的某些键的状态可以影响到所要采取的操作这些修改键就是Shift、Ctrl、Alt和Meta(在Windows键盘中是Windows键在苹果机中是Cmd键)它们经常被用来修改鼠标事件的行为 jQuery参照DOM规定了4个属性表示这些修改键的状态shiftKey、ctrlKey、altKey和metaKey。这些属性中包含的都是布尔值如果相应的键被按下了则值为true否则值为false script srchttp://cdn.bootcss.com/jquery/1.12.4/jquery.min.js/script
div idbox styleheight:30px;width:200px;border:1px solid black/div
script
$(#box).click(function(event){
$(#box).html();
if(event.shiftKey){$(#box).html(shiftKey;) }
if(event.ctrlKey){$(#box).html(ctrlKey;) }
if(event.altKey){$(#box).html(altKey;) }
if(event.metaKey){$(#box).html(metaKey;) }
})
/script stylewidth: 100%; height: 50px; srchttps://demo.xiaohuochai.site/jquery/mouse/m8.html frameborder0 width320 height240
坐标位置 关于坐标位置DOM事件对象提供了clientX/Y、pageX/Y、screenX/Y、x/y、offsetX/Y、layerX/Y这6对信息但各浏览器实现情况差异很大 jQuery关于坐标位置提供了clientX/Y、offsetX/Y、screenX/Y、pageX/Y这四对信息
clientX/Y clientX/Y表示鼠标指针在可视区域中的水平和垂直坐标 script srchttp://cdn.bootcss.com/jquery/1.12.4/jquery.min.js/script
div idbox styleheight:30px;width:200px;border:1px solid black/div
script
$(#box).mousemove(function(event){
$(#box).html(function(index,oldHtml){
return clientX: event.clientX ;clientY: event.clientY
});
})
/script stylewidth: 100%; height: 50px; srchttps://demo.xiaohuochai.site/jquery/mouse/m9.html frameborder0 width320 height240
offsetX/Y offsetX/Y表示相对于定位父级的水平和垂直坐标 script srchttp://cdn.bootcss.com/jquery/1.12.4/jquery.min.js/script
div idbox styleheight:30px;width:400px;border:1px solid black/div
script
$(#box).mousemove(function(event){
$(#box).html(function(index,oldHtml){
return clientX: event.clientX ;clientY: event.clientY offsetX: event.offsetX ;offsetY: event.offsetY
});
})
/script stylewidth: 100%; height: 50px; srchttps://demo.xiaohuochai.site/jquery/mouse/m10.html frameborder0 width320 height240
screenX/Y screenX/Y表示鼠标指针相对于屏幕的水平和垂直坐标 script srchttp://cdn.bootcss.com/jquery/1.12.4/jquery.min.js/script
div idbox styleheight:30px;width:400px;border:1px solid black/div
script
$(#box).mousemove(function(event){
$(#box).html(function(index,oldHtml){
return clientX: event.clientX ;clientY: event.clientY screenX: event.screenX ;screenY: event.screenY
});
})
/script stylewidth: 100%; height: 50px; srchttps://demo.xiaohuochai.site/jquery/mouse/m11.html frameborder0 width320 height240
pageX/Y pageX/Y表示相对于页面的水平和垂直坐标它与clientX/clientY的区别是不随滚动条的位置变化 body styleheight:2000px;
script srchttp://cdn.bootcss.com/jquery/1.12.4/jquery.min.js/script
div idbox styleheight:100px;width:300px;background:pink;/div
div idresult/div
script
$(#box).mousemove(function(event){
$(#result).html(function(index,oldHtml){
return clientX: event.clientX ;clientY: event.clientY pageX: event.pageX ;pageY: event.pageY
});
})
/script
/body stylewidth: 100%; height: 200px; srchttps://demo.xiaohuochai.site/jquery/mouse/m12.html frameborder0 width320 height240
更多专业前端知识请上
【猿2048】www.mk2048.com
