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

码上中国博客 发布于 2015/04/30 12:43
阅读 18K+
收藏 1

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



加载中
0
jacky-zhuo
jacky-zhuo
<!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
蓝水晶飞机
蓝水晶飞机

jQuery where?


jQuery('#div1').hover(

function(){

console.log('you happy!');

},

 function(){

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

}

);



码上中国博客
码上中国博客
谢谢您,我刚刚实现了第一个问题,可是第二个问题还没有解决,您知道怎么解决吗?
码上中国博客
码上中国博客
什么?
0
淘淘我的小宝宝
淘淘我的小宝宝

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

提示信息元素用绝对定位


.modeRight2 {
    position: absolute;
    width: 150px;
    display: none;
    background-color: #FFFFFF;
    border: 1px solid #b7c8f6; }

最好还设置下z-index

xxxx.css({
    top: x,
    left: y
})
返回顶部
顶部