如何通过js实现添加事件监听和移除事件监听

发布于 2021-11-29 00:51:47 字数 1392 浏览 728 评论 6

我想实现如下功能，本来一个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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

恋你朝朝暮暮 2021-11-29 16:35:27

老大你就用JQuery不是很轻松，第二个问题你只要鼠标移动的时候改变信息提示那个元素的位置就行啊，比如：

提示信息元素用绝对定位

.modeRight2 {
    position: absolute;
    width: #0000ff;">150008000;font-weight:bold;">px;
    display: none;
    background-color: #000080;font-weight:bold;">#FFFFFF;
    border: #0000ff;">1008000;font-weight:bold;">px solid #000080;font-weight:bold;">#b7c8f6; }

最好还设置下z-index

xxxx.css({
    top: x,
    left: y
})

回复收藏 0

夜无邪 2021-11-29 15:25:51

什么？

回复收藏 0

无人问我粥可暖 2021-11-29 12:36:17

谢谢您，我刚刚实现了第一个问题，可是第二个问题还没有解决，您知道怎么解决吗？

回复收藏 0

晚风撩人 2021-11-29 12:29:47

jQuery where？

jQuery('#div1').hover(

function(){

console.log('you happy!');

},

 function(){

console.warn('i think this...');

}

);

回复收藏 0

倾城泪 2021-11-29 08:49:04

太感谢您了，您解决了我的问题，我搞后台的，不太懂前端的技术。

回复收藏 0

无人问我粥可暖 2021-11-29 06:15:47

<!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>

回复收藏 0

~没有更多了~