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 相关文章推荐
简单通用的JS滑动门代码
Dec 19 Javascript
jQuery ajax cache缓存问题
Jul 01 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
深入理解Node内建模块和对象
Mar 12 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
深入了解JavaScript 防抖和节流
Sep 12 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
给php新手谈谈我的学习心得
2007/02/25 PHP
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
js实现导航跟随效果
2018/11/17 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
Python中使用dom模块生成XML文件示例
2015/04/05 Python
Python实现的特征提取操作示例
2018/12/03 Python
Python如何实现动态数组
2019/11/02 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
软件设计的目标是什么
2016/12/04 面试题
教师推荐信范文
2013/11/24 职场文书
单位提档介绍信
2014/01/17 职场文书
食品安全工作实施方案
2014/03/26 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python