当用户将鼠标指针移到图片上时，使用 javascript 自动单击图片答案

【问题标题】：Use javascript to auto click a picture when user moves mouse pointer over the picture当用户将鼠标指针移到图片上时，使用 javascript 自动单击图片
【发布时间】：2014-02-26 17:41:24
【问题描述】：

我的想法是当用户将鼠标指针移到图片上时自动单击图片的脚本。请指导我如何制作。提前谢谢你。

【问题讨论】：

有什么意义？如果我不小心将鼠标悬停在该图片上怎么办？

标签： javascript mouseover

【解决方案1】：

并不是说我支持这样的事情。但是……

el = document.getElementById('lol');
el.onmouseover = function(){el.click();}

el.onclick = function(){
    //your code for having clicked the element
}

这是一个 jsfiddle：http://jsfiddle.net/Rap6M/

但是！为什么不把你的代码放在onmouseover 监听器中呢？特别是看到（尽管被广泛接受）并非所有浏览器都支持el.click()

以下是 MDN 对 click() 的评价：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.click

注意到他们说：

但是，点击事件的冒泡不会导致<a> 元素就像收到真正的鼠标点击一样启动导航。

【讨论】：

【解决方案2】：

听起来您想触发一个 DOM mouse onclick 事件，但在鼠标悬停在某些元素（在本例中为图片）期间。

我的建议是只要将鼠标悬停在图像上就触发事件（鼠标点击）。只需在您的对象上设置一个事件侦听器来侦听onmouseover 事件，一旦检测到它，就在您需要的任何元素上触发点击事件。

看看这个：

<img id="my_image" src="myimage.png"></img>
<div id="my_clicky_div">My click event will be triggered</div>

<script type="text/javascript">
    $("#my_clicky_div").on("click", function() {
        console.log("My click event has been triggered!")
    })
    $("#my_image").on("mouseover", function() {
        $("#my_clicky_div").trigger('click');
    });
</script>

您创建一个图像标签和一个 div。每当您将鼠标悬停（鼠标悬停）此图像时，都会触发 div 的 onclick 事件。

为方便起见，您应该将需要触发的任何事件绑定到 onmouseover 事件上，您基本上绕过了一个步骤：

<img id="my_image" src="myimage.png"></img>
<script type="text/javascript">
    $("#my_image").on("mouseover", function() {
    // Instead of issuing another event, run the code that happens during the click event 
    });
</script>

如果这有帮助，请告诉我！

参考资料： http://api.jquery.com/mouseover/、http://api.jquery.com/trigger/、http://api.jquery.com/on

【讨论】：