javascript - jQuery 重复对象

Question

在一个 div 容器 (#links) 中，我希望能够将鼠标悬停在链接上然后执行一个操作(稍后实现)。当我退出 div 框 (#links) 时，我希望发生不同的操作。

问题:悬停在 div 容器 (#links) 中有效。当我点击链接时，它会按要求记录属性。但是，当我离开 div 容器 (#links) 并返回时，单击链接而不是显示单个日志事件。下次我这样做时，它会显示 3 次、4 次等等...

html:

<div id="links">
    <ul>
        <li><a href="javascript:void(0)" name="link_1" >link 1</a></li>
        <li><a href="javascript:void(0)" name="link_2" >link 2</a></li>
        <li><a href="javascript:void(0)" name="link_3" >link 3</a></li>
        <li><a href="javascript:void(0)" name="link_4" >link 4</a></li>
        <li><a href="javascript:void(0)" name="link_5" >link 5</a></li>
    </ul>
    </div>

JS:

var jQ = jQuery.noConflict();
        jQ(document).ready(function()
        {

                jQ("#links").hover(
                    function() {
                        console.log("links over")
                        jQ("a").click(function() {
                            console.log(this)
                        })
                    },
                    function() {
                        console.log("links out")
                    }
                );
        });

控制台:注意:所有“a”属性都是单次点击的结果。

链接结束

a name="link_5"href="javascript:void(0)"

链接出来

链接结束

a name="link_5"href="javascript:void(0)"

a name="link_5"href="javascript:void(0)"

链接出来

Answer 1

不要在 $.hover(); 中定义您的 $.click() 方法 每次悬停时，您都会向点击添加另一个事件:

jQ("a").click(function() {
  console.log(this)
})

这应该从您的 $.hover() 调用中提取。

var jQ = jQuery.noConflict();
jQ(document).ready(function()
{
  jQ("a").click(function() {
    console.log(this)
  });

  jQ("#links").hover(
    function() {
      console.log("links over");
    },
    function() {
      console.log("links out");
    }
  );
});