如何通过js实现添加事件监听和移除事件监听
我想实现如下功能，本来一个HTMl的标签上是没有当鼠标滑过时触发js函数的事件，但是当点击了一个按钮之后，这个按钮触发的js会给那个HTML标签添加上鼠标滑过的事件，这个应该如何实现？
还有一个问题就是我想实现当鼠标停在某个组件上时，这个组件上会浮起一个提示信息，我写的代码可以实现鼠标停在这里就会出现提示信息，但是那个提示信息的位置却是不动，也就是它只在固定的位置出现，如何实现让这个提示信息在鼠标停留的位置出现？
我第二个问题的代码如下，请大神们给看看如何修改：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//显示角色详细信息
function showDetail(flag, a) {
var detailDiv = a.parentNode.getElementsByClassName('detail_info')[0];
if (flag) {
detailDiv.style.display = "block";
}
else
detailDiv.style.display = "none";
}
</script>
<script src="../assets/jquery.js"></script>
</head>
<body>
<input type ="button" value="测试增加/移除监听" onclick="testAction()"/>
<div >
<input onmouseover="showDetail(true,this);" onmouseout="showDetail(false,this);" type="text" />
<input onmouseover="showDetail(true,this);" onmouseout="showDetail(false,this);" type="text" />
<!--浮动的详细信息-->
<div class="detail_info" >
浮动提示信息
</div>
</div>
</body>
</html>
展开
收起
1
条回答
写回答
写回答
-
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .detail_info { position: absolute; display: none; } </style> </head> <body> <input type ="button" value="测试增加/移除监听" id="btn_bind"/> <div style="position: relative;" id="box_content"> <input type="text" class="text" /> <input type="text" class="text" /> <!--浮动的详细信息--> <div class="detail_info" id="box_detail"> 浮动提示信息 </div> </div> <script type="text/javascript"> (function () { document.getElementById("btn_bind").addEventListener("click", function () { if(this.bindStatue) { removeEvent(); } else { bindEvent(); } this.bindStatue = !this.bindStatue; }); function removeEvent() { var inputs = document.querySelectorAll(".text"); for(var i = 0, length = inputs.length; i < length; i++) { inputs[i].removeEventListener("mousemove", showDetail); inputs[i].removeEventListener("mouseout", hideDetail); } } function bindEvent() { var inputs = document.querySelectorAll(".text"); for(var i = 0, length = inputs.length; i < length; i++) { inputs[i].addEventListener("mousemove", showDetail); inputs[i].addEventListener("mouseout", hideDetail); } } function showDetail(e) { var e = e || window.event, box = document.getElementById("box_detail"), content = document.getElementById("box_content"); box.style.display = "block"; box.style.top = e.clientY - content.offsetTop + "px"; box.style.left = e.clientX - content.offsetLeft + "px"; } function hideDetail() { document.getElementById("box_detail").style.display = "none"; } })(); </script> </body> </html>2019-07-17 19:55:33赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
