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 相关文章推荐
从sohu弄下来的flash中展示图片的代码
Apr 27 Javascript
js word表格动态添加代码
Jun 07 Javascript
Jquery截取中文字符串的实现代码
Dec 22 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
Jul 12 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 Javascript
JavaScript如何判断对象有某属性
Jul 03 Javascript
基于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
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
php随机输出名人名言的代码
2012/10/07 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
[02:57]DOTA2亚洲邀请赛 SECRET战队出场宣传片
2015/02/07 DOTA
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
python批量提取word内信息
2015/08/09 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
python3字符串操作总结
2019/07/24 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
2019/11/26 HTML / CSS
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
幼儿园小班家长寄语
2014/04/02 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
小学生手册家长意见
2015/06/03 职场文书
干部培训简讯
2015/07/20 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书