简述js对象中常用的鼠标事件有哪些_百度知道
简述js对象中常用的鼠标事件有哪些
我有更好的答案
jb51.net/article/28772.htm常用的就 onclick、onmouseover、onmouseout://www.htm" target="_blank">http.net/article/28772帮你找了下，自己看吧<a href="http://www.jb51
为您推荐：
其他类似问题
鼠标的相关知识
&#xe675;换一换
回答问题，赢新手礼包&#xe6b9;
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。JavaScript事件学习小结(五）js中事件类型之鼠标事件
作者：starof
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了JavaScript事件学习小结(五）js中事件类型之鼠标事件的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
相关阅读：
JavaScript事件学习小结(五）js中事件类型之鼠标事件
JavaScript事件学习小结（一）事件流
javaScript事件学习小结（四）event的公共成员（属性和方法）
JavaScript事件学习小结(二)js事件处理程序
JavaScript事件学习小结（三）js事件对象
DOM3级事件中定义了9个鼠标事件。
mousedown:鼠标按钮被按下（左键或者右键）时触发。
不能通过键盘触发。
mouseup:鼠标按钮被释放弹起时触发。
不能通过键盘触发。
click:单击鼠标左键或者按下回车键时触发。这点对确保易访问性很重要，意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。dblclick:双击鼠标左键时触发。mouseover:鼠标移入目标元素上方。鼠标移到其后代元素上时会触发。mouseout:鼠标移除目标元素上方。
mouseenter:鼠标移入元素范围内触发，该事件不冒泡，即鼠标移到其后代元素上时不会触发。
mouseleave:鼠标移出元素范围时触发，该事件不冒泡，即鼠标移到其后代元素时不会触发。
mousemove:鼠标在元素内部移到时不断触发。
不能通过键盘触发。
在一个元素上相继触发mousedown和mouseup事件，才会触发click事件。两次click事件相继触发才会触发dblclick事件。
如果取消 了mousedown或mouseup中的一个，click事件就不会被触发。直接或间接取消了click事件，dblclick事件就不会被触发了。
1、事件触发的顺序
举例：通过双击按钮，看一下上面触发的事件。
&input id="btn" type="button" value="click"/&
var btn=document.getElementById("btn");
btn.addEventListener("mousedown",function(event){
console.log("mousedown");
btn.addEventListener("mouseup",function(){
console.log("mouseup");
btn.addEventListener("click", function () {
console.log("click");
btn.addEventListener("dblclick", function () {
console.log("dblclick");
2、mouseenter和mouseover的区别
mouseover事件会冒泡，这意味着，鼠标移到其后代元素上时会触发。
mouseenter事件不冒泡，这意味着，鼠标移到其后代元素上时不会触发。
&!DOCTYPE html&
&head lang="en"&
&meta charset="UTF-8"&
&title&&/title&
width: 200
height: 200
background-color:
width: 100
height:100
margin-left: -50
margin-top: -50;
background-color:
text-align:
line-height: 100
#outer,#inner{
border-radius:50%;
&script src="jquery-2.1.1.min.js"&&/script&
&div id="outer"&
&div id="inner"&
var parentDiv=document.getElementById("outer");
parentDiv.addEventListener("mouseover", function () {
console.log("父div的mouseover事件被触发");
//parentDiv.addEventListener("mouseenter", function () {
// console.log("父div的mouseenter事件被触发");
//},false);
//parentDiv.addEventListener("mouseout", function () {
// console.log("父div的mouseout事件被触发");
//},false);
//parentDiv.addEventListener("mouseleave", function () {
// console.log("父div的mouseleave事件被触发");
//},false);
mouseover对应mouseout,mouseenter对应mouseleave。效果可以取消上面代码的注释来看。
jquery中hover API是把mouseenter 和mouseleave组合在一起来用的。
3、鼠标左键和右键
&script type="text/javascript"&
document.onmousedown=function (ev)
var oEvent=ev||
alert(oEvent.button);// IE下鼠标的 左键是1 ， 右键是2 ff和chrome下 鼠标左键是0 右键是2
4、mouseover和mousemove的区别
一般情况下mouseover即可，特殊情况才用mousemove，mousemove更耗资源，比如要监控鼠标坐标的变化等。
以上所述是小编给大家介绍的JavaScript事件学习小结(五）js中事件类型之鼠标事件的相关知识，希望对大家有所帮助！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具js添加鼠标事件
添加新的tr之后，鼠标移动上去之后，背景色不会变化，求解。
正确解答，赞一个。
写下你的评论...
Copyright (C) 2018 imooc.com All Rights Reserved | 京ICP备 号-2　　首先普及一下鼠标左右键值的相关方法：
　　1、event.x 鼠标横轴&　　2、event.y 鼠标纵轴&　　3、event.keycode 键盘值&　　4、events.button==0 默认。没有按任何按钮。&　　5、events.button==1 鼠标左键&　　6、events.button==2 鼠标右键&　　7、events.button==3 鼠标左右键同时按下&　　8、events.button==4 鼠标中键&　　9、events.button==5 鼠标左键和中键同时按下&　　10、events.button==6 鼠标右键和中键同时按下&　　11、events.button==7 所有三个键都按下
　　下面列举几个网页上常用的JavaScript事件的例子，有的我们平时已经再用，主要操作对象是键盘和鼠标，比如判断鼠标哪个按键被点击、鼠标的光标坐标、被按下键的unicode码是多少、当前鼠标的光标相对于屏幕的坐标是多少、shift键是否按下等，下面我们一一来看具体对应的代码：
一、判断当前网页被点击的是哪一个元素：
&meta charset="utf-8" /&
&title&被点击的是哪一个元素&/title&
&body onmousedown="whichElement(event)"&
&p&在这里点击看看，这里是p&/p&
&h3&或者点击这里，这里是h3&/h3&
&p&你点我吗？？&/p&
&img src="img/18.jpg" width="<span style="color: #0"&
&script type="text/javascript"&
function whichElement(e) {
// 如果没有传参，默认的事件将会是window.那个触发便是那个；
var e = window.event;
// 事件具体指向的事件源
if(e.target) {
} else if (e.srcElement) {
targ = e.srcE
// defeat Safari bug
if(targ.nodeType == <span style="color: #) {
targ = targ.parentN
var tname = targ.tagN
alert("你点击了 " + tname + "元素")
二、判断shift键是否按下：
&title&shift键是否按下?&/title&
&script type="text/javascript"&
function isKeyPressed(event) {
if(event.shiftKey == <span style="background-color: #f5f5f5; color: #) {
alert("shit键按下了!")
alert("shit键没有按下!")
&body onmousedown="isKeyPressed(event)"&
&p&按下shit键，点击你鼠标的左键&/p&
三、判断当前鼠标的光标坐标是多少？
&title&当前鼠标的光标是多少？&/title&
&script type="text/javascript"&
function coordinates(event) {
x = event.x
y = event.y
alert("X=" + x + " Y=" + y)
&body onmousedown="coordinates(event)"&
&p&点击你鼠标的左键&/p&
四、判断当前鼠标光标相对于屏幕坐标是多少？
&title&鼠标光标相对于屏幕的坐标&/title&
&script type="text/javascript"&
function coordinates(event) {
x = event.screenX
y = event.screenY
alert("X=" + x + " Y=" + y)
&body onmousedown="coordinates(event)"&
&p&点击鼠标左键&/p&
五、获取被按下的键盘任意键的unicode码是多少？
&title&获取被按下键的unicode码&/title&
&script type="text/javascript"&
function whichButton(event) {
alert(event.keyCode)
&body onkeyup="whichButton(event)"&
&p&请按下键盘上的任意键&/p&
六、检测获取当前鼠标光标的坐标是多少？
&title&获取鼠标光标坐标&/title&
&script type="text/javascript"&
function show_coords(event) {
x = event.clientX
y = event.clientY
alert("X 坐标： " + x + ", Y 坐标： " + y)
&body onmousedown="show_coords(event)"&
&p&请按下鼠标左键看看！&/p&
七、判断鼠标的哪个按键被点击？
&title&检测鼠标的哪个按键被点击？&/title&
&script type="text/javascript"&
function whichButton(event) {
if(event.button == <span style="background-color: #f5f5f5; color: #) {
alert("你点击了右键!")
alert("你点了左键!")
以上这些方法差不多可以让我么认识鼠标的一下事件了。
阅读(...) 评论()