如何用 javascript 模拟对 div 的点击

Question

我正在寻找一种能够为 YouTube 控制按钮设置快捷方式的方法。我希望能够单击左右箭头以激活播放列表中的 "Previous video" 和 "Next video"。我过去很容易自己做，但他们做了一些改变，因为那些我不能完全复制我以前的工作。

我用的是GoogleChromeShortkey Plug-in to manage my short cut keys. I make the right key execute a javascript code only on "https://www.youtube.com*

问题出在要执行的脚本上。我以前只是简单地做一个 document.getElementById 但现在他们使用 class 而不是 id，我无法让它工作。他们的按钮是 div，它们是这样的：

<div class="ytp-button ytp-button-prev" role="button" aria-label="Previous" tabindex="6050" style="display: inline-block;">
</div>
<div class="ytp-button ytp-button-next" role="button" aria-label="Next" tabindex="6051" style="display: inline-block;">

我的代码实际上来自另一个 Whosebug Question

不过，如果我将所有这些放在一起来生成以下代码，它仍然无法正常工作。

simulate(document.getElementsByClassName("ytp-button ytp-button-prev"), "click");

Answer 1

getElementsByClassName returns 一个数组，因为您可以有多个具有相同 class 名称的元素。您可以通过document.getElementsByClassName("ytp-button ytp-button-prev")[index]

来挑选它们

Answer 2

如果您使用的是 jQuery，您可以定位元素然后触发点击事件，如下所示：

$( ".ytp-button-prev" ).trigger( "click" );

Answer 3

Jason 有您的答案，但另一种方法是使用 document.querySelector。如果那些类只有一个按钮，或者你想要第一个，那么：

var button = document.querySelector('.ytp-button.ytp-button-prev');

Answer 4

jQuery 不是我们所有项目的最佳解决方案，但对于模拟事件来说它是不错的选择

(function($){
    $('.element').click();
    // same for others ex: $('.element').keyup();
})(jQuery);

示例：http://jsfiddle.net/h0po3q3w/

如何用 javascript 模拟对 div 的点击

How do I simulate a click on a div with javascript

javascript

youtube

keyboard-shortcuts