jquery如何阻止子元素相应mouseout事件
jquery如何阻止子元素相应mouseout事件:
mouseout有一个特点，当鼠标移入子元素的时候，也会触发此事件，但是在实际应用中这个特点往往不是我们想要的，下面就通过代码实例介绍一下如何实现此效果，代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#father
{
width:100px;
height:100px;
background:red;
}
#inner
{
width:50px;
height:50px;
background:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#father").mouseout(function(e){
evt = window.event||e;
var obj=evt.toElement||evt.relatedTarget;
var pa=this;
if(pa.contains(obj)) return false;
$(this).hide();
});
})
</script>
</head>
<body>
<div id="father">
<div id="inner"></div>
</div>
</body>
</html>
以上代码实现了我们的要求，当鼠标指针移入子div的时候，不会触发事件，但是当鼠标移出父div的时候会触发事件，下面接扫一下实现此效果的过程。
一.实现原理:
原理非常的简单，就是判断当鼠标指针移动的时候，判断与事件的目标节点相关的节点是否是子元素，如果是子元素，则不触发事件，如果不是子元素则触发事件。
二.相关阅读:
1.mouseout事件可以参阅jQuery的mouseout事件一章节。
2.evt = window.event||e可以参阅var ev=window.event||ev的作用是什么一章节。
3.toElement属性可以参阅javascript的toElement事件属性一章节。
4.relatedTarget属性可以参阅javascript的relatedTarget事件属性一章节。
5.this可以参阅javascript的this用法详解一章节。
6.contains()函数可以参阅jQuery.contains()方法一章节。
7.hide()函数可以参阅jQuery的hide()方法一章节。
jquery如何阻止子元素相应mouseout事件的更多相关文章
- jquery如何阻止子元素继承父元素的事件（又称事件冒泡）
非常简单,子元素上添加如下代码即可 $('a').click(function(e){ e.stopPropagation(); }); 老版本为event,现在用e就行
- jQuery如何阻止子元素继承父元素事件？
<a> <b></b> </a> $("a").click(...); 这种绑定的话,b也会响应一次事件,如何只对a元素绑定事件,而 ...
- 【原创】解决鼠标经过子元素触发mouseout，mouseover事件的问题
关键词:父子元素关系 mouseout mouseover 事件 事件冒泡 初期代码: <!DOCTYPE html> <html> <head> < ...
- jQuery选择器之子元素过滤选择器Demo
测试代码: 07-子元素过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
- jquery 动态创建的元素，绑定事件无效之解决方法
今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...
- jquery动态添加的元素绑定的事件不生效的问题
我们可以通过 $(document).on('click', '#xxx', callback) 这种形式解决. 原因,一般情况下,我们是通过 $('#xxx').click(callback) 这种 ...
- [转]jquery后代和子元素的区别
这是<锋利的jquery>书里的内容 <div> <p> <span></span> <a&g ...
- jQuery选择器之子元素选择器
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...
- 如何防止鼠标移出移入子元素触发mouseout和mouseover事件
js代码: function isMouseLeaveOrEnter(e, handler) { var reltg=e.relatedTarget?e.relatedTarget:e.type==' ...
随机推荐
- myeclipse2013 jsp编辑初始化
首先,大家可能有过这种经历.双击打开jsp编辑.它默认会打开视图,这样就使人恼火了,卡死了.所以我们能够自己设jsp的默认打开方式:打开Window-->preferences得: 搜索edit ...
- LeetCode_Construct Binary Tree from Inorder and Postorder Traversal
一.题目 Construct Binary Tree from Inorder and Postorder Traversal My Submissions Given inorder and pos ...
- sql阻塞进程查询
select A.SPID as 被阻塞进程,a.CMD AS 正在执行的操作,b.spid AS 阻塞进程号,b.cmd AS 阻塞进程正在执行的操作 from master..sysprocess ...
- Sql Server通用分页存储过程
Sql Server2005通用分页存储过程 CREATE PROCEDURE [dbo].[Common_GetPagedList] ( @TableName nvarchar(100), --表名 ...
- 学习参考《Python数据分析与挖掘实战(张良均等)》中文PDF+源代码
学习Python的主要语法后,想利用python进行数据分析,感觉<Python数据分析与挖掘实战>可以用来学习参考,理论联系实际,能够操作数据进行验证,基础理论的内容对于新手而言还是挺有 ...
- SpringBoot 增加 拦截器 判断是否登录
1.创建拦截器 package com.example.demo.interceptor; import org.slf4j.Logger; import org.slf4j.LoggerFactor ...
- UVALive 7146 Defeat The Enemy
Defeat The Enemy Time Limit: 3000MS Memory Limit: Unknown 64bit IO Format: %lld & %llu Long long ...
- sleep实现原理
用户程序中的睡眠: sleep() usleep() nanosleep() sleep()和nanosleep()都是使进程睡眠一段时间后被唤醒,但是二者的实现完全不同.Linux中并没 ...
- [Python] Manipulate Data with Dictionaries in Python
Dictionaries may be familiar to you as hash maps. In this lesson, you will learn how to create them, ...
- PHP开发常规安全问题总结
文章来源:PHP开发学习门户 地址:http://www.phpthinking.com/archives/575 php给了开发人员极大的灵活性,可是这也为安全问题带来了潜在的隐患,最近须要总结一下 ...