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 XML操作 封装类
Jul 01 Javascript
jquery键盘事件使用介绍
Nov 01 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 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
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
Vue表单控件绑定图文详解
2019/02/11 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
Django缓存系统实现过程解析
2019/08/02 Python
python多线程同步实例教程
2019/08/11 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
编辑硕士自荐信范文
2013/11/27 职场文书
母亲节寄语大全
2015/02/27 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
旗帜观后感
2015/06/08 职场文书
运动会通讯稿200字
2015/07/20 职场文书
图书借阅制度范本
2015/08/06 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
深入理解python协程
2021/06/15 Python