JS Lightbox -在LightBox中模拟鼠标单击，但document.click()不激活Lightbox
背景
更高的想法是，我试图使用语音命令来控制我的网页。我收到一条消息来做一些事情，我试着用编程来模拟。(即点击按钮或键入某物)。
现在，我有一个Lightbox图库(使用包含图像的源代码(https://www.lokeshdhakar.com/projects/lightbox2/?) )。在锚中有一个带有锚元素和图像元素的div容器。
<doctype = HTML>
<html>
<head>
<link rel = 'stylesheet' type='text/css' href='css/style.css'>
<link rel = "stylesheet" type = 'text/css' href = 'css/lightbox.min.css'>
<script src = 'js/lightbox-plus-jquery.min.js'></script>
<title>Image Gallery</title>
<meta name = 'viewport' content = 'width = device-width, initial-scale = 1.0'>
</head>
<body>
<div class = "Gallery" id = 'gallery'>
<a id = 'image 1' href = "http://placekitten.com/200/300" data-lightbox = 'mygallery' ><img src = "http://placekitten.com/200/300"></a>
<a id = 'image 2' href = "http://placekitten.com/200/300" data-lightbox = 'mygallery' ><img src = "http://placekitten.com/200/300"></a>
<a id = 'image 3' href = "http://placekitten.com/200/300" data-lightbox = 'mygallery' ><img src = "http://placekitten.com/200/300"></a>
<a id = 'image 4' href = "http://placekitten.com/200/300" data-lightbox = 'mygallery' ><img src = "http://placekitten.com/200/300"></a>
<a id = 'image 5' href = "http://placekitten.com/200/300" data-lightbox = 'mygallery' ><img src = "http://placekitten.com/200/300"></a>
</div>
</body>这是最初的样子。按页加载
这就是我点击其中一张图片时的样子。在图像点击
问题
现在，当我收到一条消息(来自语音命令)以单击图像时，我运行以下命令：
document.getElementById('image1').click()然而，当我这样做的时候，它会带我到图像的实际url，"http://placekitten.com/200/300"，而不是做整个Lightbox的事情。
由于我对HTML和JS的了解有限，Lightbox脚本将创建一个onclick事件侦听器，当您单击图像时，它将实例化一个新的“Lightbox”。我很困惑为什么普通的鼠标点击会启动一个新的Lightbox，但是document.getElement.click()却不会。
问题
- 鼠标单击与document.getElement.click()有何不同？
- 为什么这不是working?...lol
谢谢!
回答 1
Stack Overflow用户
发布于 2020-07-08 22:05:38
我想通了。这与事件传播有关。
图像是锚节点的子节点。当您执行document.getElementById('id').click()时，它将激活图像的事件侦听器，然后单击event，然后单击event，直到顶部元素，即锚元素，然后将我重定向到锚中的链接(尽管它应该充当缩略图)。
可以在事件侦听器中使用stopPropagation()或stopImmediatePropagation()调用停止事件传播，也可以执行event.preventDefault()。
我对这一发现的后续问题是，Lightbox库太复杂，我无法理解，无法去修改事件侦听器以防止事件冒泡。
https://stackoverflow.com/questions/62702982
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号