Javascript JQuery单击div按钮（'；t火

我试图模仿一个用户点击一个我无法控制的代码的站点。我试图与一个充当按钮的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>

。。。但什么也没发生。选择器有效，由以下人员验证：

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并触发原始函数，而不是在元素上定义新的单击函数

更新

---

这些答案中的许多确实单击了按钮，但不会产生与手动单击按钮相同的结果。因此，问题似乎不一定是单击按钮本身，而是模拟真实的单击。

从您发布的事件处理程序图像中，单击不是其中之一。以编程方式触发单击与自然触发不同。此处不触发鼠标进入/离开/按下事件。

$（'.c-T-S.a-b.a-b-b-a-b-Ma.oU.v2'）。触发器（'click'）执行作业-触发单击事件

.trigger（）：执行附加到匹配元素的所有处理程序和行为
对于给定的事件类型



$（'.c-T-S.a-b.a-b-b.a-b-Ma.oU.v2'）。在（'click'，function（）{
警报（$（this.text（））；
});
$（'c-T-S.a-b.a-b-b.a-b-Ma.oU.v2'）。触发器（'click'）

生成
我实际上尝试了你提供的链接，效果很好。页面上没有jquery，因此必须使用本机方法

var click= document.createEvent("MouseEvents");
click.initMouseEvent("click", true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);

document.getElementsByClassName('c-T-S a-b a-b-B')[0].dispatchEvent(click)

我已经为此创建了一个新的应用程序，它工作得很好。我用过以下方法

$('.c-T-S.a-b.a-b-B.a-b-Ma.oU.v2').click(function(){
    alert("clicked");
});
$('.c-T-S.a-b.a-b-B.a-b-Ma.oU.v2').click();// This will trigger click event programatically

我做了一个模拟你的“不可点击”按钮。那里的蓝色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

$(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'));

3） 正如Scimonster所指出的，没有附加click eventListener。这意味着：

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

$(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
-事件时，它看起来像是单击。在小提琴中，鼠标使红色div可见。您可以尝试通过在代码中添加以下行来触发mouseup事件：

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

mouseup处理程序被
mouseover
-和
mouseout
-事件“隐藏”，第一个事件附加它，第二个事件删除它。这样，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。按钮被包装在
-标签中。此标记是按钮的父级，其属性
jsaction
的值表示
具有
单击
、
焦点
和
鼠标向下
的侦听器。直接瞄准它会起作用：

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

2） 如果要单击按钮本身，必须触发一个事件，使DOM冒泡，以到达具有单击处理程序的元素。但是，当使用
新事件（“名称”）创建事件时，其
气泡属性默认为
false
没有想到这一点是我的错。。因此，以下操作直接作用于按钮：

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

编辑2深入挖掘该页面上的内容，得到了一个有用的结果：

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

对元素的自然“单击”总是按给定顺序触发四个事件：
mouseover
，
mousedown
，
mouseup
，以及
单击
。要模拟自然行为，
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"));

该函数不会模拟给定任务不需要的真实鼠标移动。
使用jQuery时，始终使选择器成为第一个可疑对象。在假设它正在查找元素之前，请检查它是否正在查找元素。运行-
警报（$（'.c-T-S.a-b.a-b-b.a-b-Ma.oU.v2'）。长度）-它给你0还是1？如果是前者，则它找不到元素。我已经验证了这不是问题所在，但这是可靠的建议。您是否尝试过使用trigger
$（'.c-T-s.a-b.a-b.a-b-Ma.oU.v2'）。trigger（'click'）确定，下一步，在单击事件回调中，添加警报或其他内容。它会触发吗？
.click（）
是
.trigger（'click'）
的一个快捷方式，我知道，但我尝试了button.mouseover（）.mousedown（）.mouseup（），但没有成功，而且这些事件在您直接调用它们时不会触发？它们不会。这是一个谷歌页面，所以他们可能有额外的机制在玩idkOh，我应该知道。没有人给这样疯狂的班名P他们可能还有其他奇怪的事情发生。我以前见过谷歌（在地图api中）创建一些意外事件，所以你可以