div按钮上的JQuery click()不会触发

Question

我试图模仿用户点击我无法控制的代码的网站.我尝试与div作为按钮的元素.

<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>

与元素关联的事件监听器(根据Chrome的检查员)是:

而我只是试图点击按钮使用:

var button = $('.c-T-S.a-b.a-b-B.a-b-Ma.oU.v2')
button.click()

......但没有任何反应.选择器有效,经过验证:

alert($('.c-T-S.a-b.a-b-B.a-b-Ma.oU.v2').length); // alerts "1"

我尝试过所有事件处理程序的排列

button.trigger('click');
button.mouseover().mousedown().mouseup()
button.trigger('mouseover', function() { button.trigger('mousedown', function() { button.trigger('mouseup'); });  });

......但仍然没有.如何模拟此div的点击？

如果不清楚,我试图模拟这个div上的单击并触发原始函数,而不是在元素上定义新的单击函数.

UPDATE

其中许多答案确实单击了按钮,但不会产生与手动单击按钮相同的结果.所以问题似乎不一定是点击按钮本身,而是模仿真正的点击.

Answer 1

我做了一个FIDDLE来模拟你的"不可点击"按钮.其中的蓝色div具有与您在问题中显示的相同的eventListeners.四处游戏结果如下:

1)让我们先获取DOM元素:

var button = document.getElementsByClassName('.c-T-S.a-b.a-b-B.a-b-Ma.oU.v2')[0];

2)该页面不包含jQuery.所以所有的eventListener都附加了native .addEventListener().如果使用jQuery触发事件,它只触发jQuery附加的事件,而不触发本机附加事件.这意味着:

$(button).trigger('mousedown'); // this doesn't work
button.dispatchEvent(new Event('mousedown')); // this should work

3)正如Scimonster指出的那样,没有附加click-eventListener.这意味着:

$(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)当鼠标按钮上升时,点击事件触发.当使用mouseup-event 时,它看起来像是一个点击.在小提琴中,mouseup使红色div可见.您可以尝试通过将以下行添加到代码来触发mouseup事件:

button.dispatchEvent(new Event('mouseup')); // "works", but has no visible result

mouseup-handler由mouseover- 和mouseout-events "隐藏" ,第一个附加它,后者删除它.这样,当鼠标悬停在按钮上时,mouseup只有一个结果.我假设你的谷歌页面做了类似的事情来覆盖点击事件.

5)你应该尝试什么:

首先以本机方式触发一些单个事件:

button.dispatchEvent(new Event('eventName'));

如果没有给出可用的结果,请使用一些合理的事件组合:

button.dispatchEvent(new Event('mouseover'));
button.dispatchEvent(new Event('mousedown'));
// or:
button.dispatchEvent(new Event('mousedown'));
button.dispatchEvent(new Event('mouseup')); // or: .....

有许多方法可以组合事件,以便单个事件不会执行任何操作,但只有正确的组合才有效.

编辑根据您调查来源的邀请,我找到了两种方法:

1)按钮本身没有附加eventListeners.该按钮包含在<a>-tag中.这个标签是按钮的父及其属性jsaction的值告诉<a>了听众click,focus和mousedown.直接针对它起作用:

button.parentElement.dispatchEvent(new Event('click'));

2)如果要单击按钮本身,则必须触发一个事件,该事件会使DOM冒泡以到达具有单击处理程序的元素.但是在创建事件时new Event('name'),其bubbles属性默认为false.我没有想到这一点..所以以下工作直接在按钮上工作:

button.dispatchEvent(new Event('click', {bubbles: true}));

编辑2深入挖掘该页面上的最新内容,产生了可用的结果:

已经发现页面处理鼠标指针位置和事件的正确顺序,可能区分人或机器人/脚本触发事件.因此,此解决方案使用MouseEvent包含clientX和clientY属性的- 对象,该属性在触发事件时保存指针的坐标.

一个自然的"点击"的元素总是触发给定的顺序四个事件:mouseover,mousedown,mouseup,和click.模拟自然行为mousedown并被mouseup推迟.为方便起见,所有步骤都包含在一个函数中,该函数模拟1)在其左上角输入元素,2)稍后点击元素中心.详情见评论.

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"));

该功能不会模拟给定任务不必要的真实鼠标移动.