对div按钮的JQuery点击（）不会触发 [英] JQuery click() on a div button won't fire
问题描述
我试图模拟用户点击网站的代码，我无法控制。
< div role =buttonclass =cTS abab-Ma oU v2aria-disabled =falsestyle = - webkit-user-select：none; tabindex =0>
生成
< / div>
与元素相关联的事件侦听器（根据Chrome的检查器）是：
>
我只是试图点击按钮：
var button = $（'。cTS.ab .abB.ab-Ma.oU.v2'）
button.click（）
...但没有发生。选择器有效，通过验证：
alert（$（'。cTS.ab.abB.ab-Ma.oU .v2'）。 // warn1
我尝试过所有事件处理程序的排列
button.trigger（'click'）;
button.mouseover（）。mousedown（）。mouseup（）
button.trigger（'mouseover'，function（）{button.trigger（'mousedown'，function（）{button.trigger mouseup'）;}）;}）;
...但仍然没有。如何模拟对这个div的点击？
如果它不清楚，我试图模拟点击这个div并触发原始函数，而不是定义对元素新的点击功能。
UPDATE
确实点击按钮，但不产生与手动点击按钮相同的结果。因此，问题不一定是点击按钮本身，而是模拟真实的点击。
p>我已经 FIDDLE 模拟您的不可点击按钮。蓝色div有与您在问题中显示的相同的eventListeners。结束了以下结果：
1）让我们先获得DOM元素：
var button = document.getElementsByClassName（'。cTS.ab.abB.ab-Ma.oU.v2'）[0];
2）页面不包括jQuery。所以所有的eventListeners都有 native .addEventListener（）。如果使用jQuery触发事件，它只触发由jQuery附加的事件，而不是本地附加的事件。这意味着：
$（button）.trigger（'mousedown'）; // this does not work
button.dispatchEvent（new Event（'mousedown'））; // this should work
3）如 Scimonster 指出，没有附加click-eventListener。这意味着：
$（button）.trigger（'click'）; //不工作，请参阅2）
//下一个工作，但在页面上没有可见的结果
//因为没有点击处理程序做任何事情：
button.dispatchEvent（new Event（'click'））;
4）点击事件在鼠标按钮上升时触发。当使用 mouseup -event，它看起来像一个点击。在小提琴，mouseup使红色div可见。您可以尝试通过将以下代码添加到代码中来触发mouseup事件：
button.dispatchEvent（new Event '））; //works，但没有可见的结果
mouseover - 和 mouseout -events，第一个附加它，后者删除它。这样mouseup只有一个结果，当鼠标在按钮。
5）您应该尝试：
首先以原生方式触发一些单一事件：
button.dispatchEvent（new Event（'eventName'））;
如果没有提供可用的结果，请使用一些合理的事件组合：
button.dispatchEvent（new Event（'mouseover'））;
button.dispatchEvent（new Event（'mousedown'））;
//或：
button.dispatchEvent（new Event（'mousedown'））;
button.dispatchEvent（new Event（'mouseup'））; //或：.....
有很多方法可以组合事件，
/ p> 1）按钮本身没有附加eventListeners。该按钮包裹在< a> -tag中。此标记是按钮的父级，其属性 jsaction 的值告诉< a> code>点击，焦点和 mousedown 。定位它直接起作用：
button.parentElement.dispatchEvent（new Event（'click'））;
2）如果你想点击按钮本身，你必须触发一个事件，到达具有点击处理程序的元素。但是当使用 new Event（'name'）创建一个事件时，它的 bubbles -property默认为 false 。 这是我的坏，没有想到这一点。。因此，以下按钮直接在按钮上工作：
button.dispatchEvent（new Event（'click'，{bubbles：true}） ）;
EDIT 2 深入了解该网页上的内容，结果：
已经发现页面处理事件的鼠标指针位置和顺序，可能区分人或机器人/脚本触发事件。因此，此解决方案使用包含 clientX 和 clientY MouseEvent
在元素上自然的点击总是按照给定的顺序触发四个事件： mouseover ， mousedown ， mouseup 单击。要模拟自然行为 mousedown 和 mouseup 延迟。为了方便起见，所有步骤都被包装在一个函数
中，模拟1）在元素的topLeft角处输入元素，2）稍后点击元素center。
function simulateClick（elem）{
var rect = elem.getBoundingClientRect（），//保存元素的所有位置和大小属性
topEnter = rect.top，
leftEnter = rect.left，//元素的坐标topLeft corner
topMid = topEnter + rect.height / 2 ，
leftMid = topEnter + rect.width / 2，//元素的坐标center
ddelay =（rect.height + rect.width）* 2，//延迟取决于元素大小
ducInit = {bubbles：true，clientX：leftMid，clientY：topMid}，//创建init对象
//设置四个事件，第一个输入坐标，
mover = new MouseEvent mouseover'，{bubbles：true，clientX：leftEnter，clientY：topEnter}），
//中心坐标为
的另一个mdown = new MouseEvent（'mousedown'，ducInit），
mup = new MouseEvent（'mouseup'，ducInit），
mclick = new MouseEvent（'click'，ducInit）;
// trigger mouseover =在toLeft角落输入元素
elem.dispatchEvent（mover）;
//触发mousedown延迟模拟移动时间到中心
window.setTimeout（function（）{elem.dispatchEvent（mdown）}，ddelay）;
//触发mouseup并点击有点延迟
//来模拟按下/释放按钮之间的时间
window.setTimeout（function（）{
elem.dispatchEvent mup）; elem.dispatchEvent（mclick）;
}，ddelay * 1.2）;
}
//现在它的作用：
simulateClick（document.querySelector（。c-T-S.a-b.a-b-B.a-b-Ma.oU.v2））;
该函数不模拟真正的鼠标移动任务。
I am trying to emulate a user's click on a site who's code I do not control. The element I am trying to engage with a div acting as button.
<div role="button" class="c-T-S a-b a-b-B a-b-Ma oU v2" aria-disabled="false" style="-webkit-user-select: none;" tabindex="0">
Generate
</div>
The event listeners that are associated with element (according to Chrome's inspector) are:
And I am simply trying to click the button using:
var button = $('.c-T-S.a-b.a-b-B.a-b-Ma.oU.v2')
button.click()
... but nothing happens. The selector is valid, as verified by:
alert($('.c-T-S.a-b.a-b-B.a-b-Ma.oU.v2').length); // alerts "1"
I have tried permutations of all the event handlers
button.trigger('click');
button.mouseover().mousedown().mouseup()
button.trigger('mouseover', function() { button.trigger('mousedown', function() { button.trigger('mouseup'); }); });
... but still nothing. How can I simulate a click on this div?
In case it is not clear, I am trying to simulate a click on this div and trigger the original function, not define a new click function on the element.
UPDATE
Many of these answer do indeed click the button, but don't produce the same result as manually clicking the button. So it appears the problem is not necessarily clicking the button per se, but emulating a real click.
I have made a FIDDLE to simulate your "non-clickable" button. The blue div there has the same eventListeners attached as you have shown in your question. Playing around ended up with following results:
1) Let's get the DOM-element first:
var button = document.getElementsByClassName('.c-T-S.a-b.a-b-B.a-b-Ma.oU.v2')[0];
2) The page doesn't include jQuery. So all eventListeners there are attached by native .addEventListener(). If you use jQuery to trigger events, it triggers only the events that are attached by jQuery, but not the native attached events. That means:
$(button).trigger('mousedown'); // this doesn't work
button.dispatchEvent(new Event('mousedown')); // this should work
3) As Scimonster pointed out, there is no click-eventListener attached. That means:
$(button).trigger('click'); // doesn't work anyway, see 2)
// next works, but has no visible result on the page,
// because there is no click-handler to do anything:
button.dispatchEvent(new Event('click'));
4) The click-event fires when the mousebutton goes up. When the mouseup-event is used instead it looks like a click. In the fiddle the mouseup makes the red div visible. You may try to trigger the mouseup-event by adding this line to the code:
button.dispatchEvent(new Event('mouseup')); // "works", but has no visible result
The mouseup-handler is "hidden" by the mouseover- and mouseout-events, the first attaches it and the latter removes it. That way mouseup has only a result when mouse is over the button. I assume your google-page does something similar to cover the click-event.
5) What you should try:
First trigger some single events in native way:
button.dispatchEvent(new Event('eventName'));
If that gives no usable results use some reasonable combinations of events:
button.dispatchEvent(new Event('mouseover'));
button.dispatchEvent(new Event('mousedown'));
// or:
button.dispatchEvent(new Event('mousedown'));
button.dispatchEvent(new Event('mouseup')); // or: .....
There are many ways to combine events so that a single event doesn't do anything, but only the right combination works.
EDIT According to your invitation to investigate the source I found two ways:
1) The button itself has no eventListeners attached. The button is wrapped in an <a>-tag. This tag is parent of the button and its attribute jsaction 's value tells that <a> has listeners for click, focus, and mousedown. Targeting it directly works:
button.parentElement.dispatchEvent(new Event('click'));
2) If you want to click the button itself you must trigger an event that bubbles up the DOM to reach an element that has a click-handler. But when creating an event with new Event('name'), its bubbles-property defaults to false. It was my bad not thinking of that.. So the following works directly on the button:
button.dispatchEvent(new Event('click', {bubbles: true}));
EDIT 2 Digging deeper in whats going on on that page yielded an usable result:
It has been found that the page takes care of the mouse-pointer position and right order of the events, probable to distinguish wether a human or a robot/script triggers the events. Therefore this solution uses the MouseEvent - object containing the clientX and clientY properties, which holds the coordinates of the pointer when the event is fired.
A natural "click" on an element always triggers four events in given order: mouseover, mousedown, mouseup, and click. To simulate a natural behaviour mousedown and mouseup are delayed. To make it handy all steps are wrapped in a function
which simulates 1) enter element at it's topLeft corner, 2) click a bit later at elements center. For details see comments.
function simulateClick(elem) {
var rect = elem.getBoundingClientRect(), // holds all position- and size-properties of element
topEnter = rect.top,
leftEnter = rect.left, // coordinates of elements topLeft corner
topMid = topEnter + rect.height / 2,
leftMid = topEnter + rect.width / 2, // coordinates of elements center
ddelay = (rect.height + rect.width) * 2, // delay depends on elements size
ducInit = {bubbles: true, clientX: leftMid, clientY: topMid}, // create init object
// set up the four events, the first with enter-coordinates,
mover = new MouseEvent('mouseover', {bubbles: true, clientX: leftEnter, clientY: topEnter}),
// the other with center-coordinates
mdown = new MouseEvent('mousedown', ducInit),
mup = new MouseEvent('mouseup', ducInit),
mclick = new MouseEvent('click', ducInit);
// trigger mouseover = enter element at toLeft corner
elem.dispatchEvent(mover);
// trigger mousedown with delay to simulate move-time to center
window.setTimeout(function() {elem.dispatchEvent(mdown)}, ddelay);
// trigger mouseup and click with a bit longer delay
// to simulate time between pressing/releasing the button
window.setTimeout(function() {
elem.dispatchEvent(mup); elem.dispatchEvent(mclick);
}, ddelay * 1.2);
}
// now it does the trick:
simulateClick(document.querySelector(".c-T-S.a-b.a-b-B.a-b-Ma.oU.v2"));
The function does not simulate the real mouse movement being unnecessary for the given task.
这篇关于对div按钮的JQuery点击（）不会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
