JavaScript事件学习小结(五)js中事件类型之鼠标事件


Posted in Javascript onJune 09, 2016

相关阅读:

JavaScript事件学习小结(五)js中事件类型之鼠标事件

2、mouseenter和mouseover的区别

区别:

mouseover事件会冒泡,这意味着,鼠标移到其后代元素上时会触发。

mouseenter事件不冒泡,这意味着,鼠标移到其后代元素上时不会触发。

举例:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 #outer{
  position: absolute;
  width: 200px;
  height: 200px;
  top:0;
  left: 0;
  bottom:0;
  right: 0;
  margin: auto;
  background-color: pink;
 }
 #inner{
  position: absolute;
  width: 100px;
  height:100px;
  top:50%;
  left:50%;
  margin-left: -50px;
  margin-top: -50px;;
  background-color: orange;
  text-align: center;
  line-height: 100px;
 }
 #outer,#inner{
  border-radius:50%;
 }
 </style>
 <script src="jquery-2.1.1.min.js"></script>
</head>
<body>
<body>
<div id="outer">
 <div id="inner">
 </div>
</div>
</body>
<script>
var parentDiv=document.getElementById("outer");
parentDiv.addEventListener("mouseover", function () {
 console.log("父div的mouseover事件被触发");
},false);
//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);
</script>
</body>
</html>

JavaScript事件学习小结(五)js中事件类型之鼠标事件JavaScript事件学习小结(五)js中事件类型之鼠标事件

note:

mouseover对应mouseout,mouseenter对应mouseleave。效果可以取消上面代码的注释来看。

jquery中hover API是把mouseenter 和mouseleave组合在一起来用的。

3、鼠标左键和右键

<script type="text/javascript">
document.onmousedown=function (ev)
{
 var oEvent=ev||event;
 alert(oEvent.button);// IE下鼠标的 左键是1 , 右键是2 ff和chrome下 鼠标左键是0 右键是2
};
</script>

4、mouseover和mousemove的区别

一般情况下mouseover即可,特殊情况才用mousemove,mousemove更耗资源,比如要监控鼠标坐标的变化等。

以上所述是小编给大家介绍的JavaScript事件学习小结(五)js中事件类型之鼠标事件的相关知识,希望对大家有所帮助!

Javascript 相关文章推荐
javascript 随机展示头像实现代码
Dec 06 Javascript
js随机颜色代码的多种实现方式
Apr 23 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
微信小程序 五星评分的实现实例
Aug 04 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 #Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 #Javascript
Node.js中npm常用命令大全
Jun 09 #Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 #Javascript
Active控件问题小结(附解决办法)
Jun 09 #Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 #Javascript
JavaScript的instanceof运算符学习教程
Jun 08 #Javascript
You might like
写一个用户在线显示的程序
2006/10/09 PHP
用PHP和ACCESS写聊天室(九)
2006/10/09 PHP
ThinkPHP框架安全实现分析
2016/03/14 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
小学教师的个人自我鉴定
2013/10/26 职场文书
公务员综合考察材料
2014/02/01 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
社区文艺活动方案
2014/08/19 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
1000字打架检讨书
2014/11/03 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
师德标兵事迹材料
2014/12/19 职场文书
观后感的写法
2015/06/19 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
浅谈golang 中time.After释放的问题
2021/05/05 Golang
Pygame Draw绘图函数的具体使用
2021/11/17 Python
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js