jquery - js mouseenter ：从子元素向上移动到父元素上没有触发mouseenter，怎么可以让父元素触发mouseenter
本文介绍了jquery - js mouseenter ：从子元素向上移动到父元素上没有触发mouseenter，怎么可以让父元素触发mouseenter的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding:0}
ul,li{list-style: none; -webkit-padding-start: 0;}
ul li{
width: 200px;
padding: 20px;
background: #ffccff;
}
ul li.li-wrap{
padding-bottom: 0;
padding-left: 0;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script>
$(function () {
$(".wrap").find("li").each(function () {
$(this).off("mouseenter").on("mouseenter",function (e) {
$("#ss").remove();
$(this).children("span").after("<span id='ss' onclick='sss(this)'>woshishui</span>");
//console.log($(this).text());
//阻止默认浏览器动作(W3C)
/*if (e && e.preventDefault)
e.preventDefault();
//IE中阻止函数器默认动作的方式
else
window.event.returnValue = false;*/
return false;
});
}).off("mouseleave").on("mouseleave",function (e) {$("#ss").remove();
});
});
function sss(obj) {
console.log(obj);
}
</script>
</head>
<body>
<div class="wrap">
<ul>
<li class="li-wrap">
<span>1</span>
<ul>
<li class="no-child"><span>a</span></li>
<li class="no-child"><span>b</span></li>
<li class="no-child"><span>c</span></li>
<li class="no-child"><span>d</span></li>
</ul>
</li>
<li class="li-wrap">
<span>2</span>
<ul>
<li><span>!</span></li>
<li><span>@</span></li>
<li><span>￥</span></li>
<li><span>%</span></li>
</ul>
</li>
<li class="li-wrap">
<span>3</span>
<ul>
<li><span>u</span></li>
<li><span>j</span></li>
<li><span>k</span></li>
<li><span>l</span></li>
</ul>
</li>
<li class="li-wrap"><span>41</span></li>
</ul>
</div>
</body>
</html>解决方案
换一种思路吧；span标签是行内元素，为了整行滑过，html增加了div块级标签，应该是你要的效果；
demo：
http://jsbin.com/yeqexakuka/e...
这篇关于jquery - js mouseenter ：从子元素向上移动到父元素上没有触发mouseenter，怎么可以让父元素触发mouseenter的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
