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 对象的定义方法
Jan 10 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
js生成随机数的方法实例
Oct 16 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
详解vue-cli中配置sass
Jun 21 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 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
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
php利用cookie实现自动登录的方法
2014/12/10 PHP
利用javascript查看html源文件
2006/11/08 Javascript
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
详解K-means算法在Python中的实现
2017/12/05 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
Python PyPDF2模块安装使用解析
2020/01/19 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
工程项目经理岗位职责
2013/12/15 职场文书
洗发水广告词
2014/03/13 职场文书
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
教师思想工作总结2015
2015/05/13 职场文书
网吧管理制度范本
2015/08/05 职场文书
施工现场安全管理制度
2015/08/05 职场文书
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers