javascript - 在 ember.js 中的按钮上触发手动点击事件不会给出所需的结果

Question

TL;DR:尝试在 twitch 的聊天按钮上触发手动 javascript 单击事件，不会发送消息。不明白为什么该事件与普通点击不一样，也不知道如何让它发挥作用。

所以我正在尝试为 twitch.tv 制作一个自定义机器人，只直接从 HTML 中读取他的信息。我已经让它完美地工作到可以识别命令并将文本放入文本框中的地步。现在我遇到的问题是，一旦我尝试在“聊天”按钮上触发手动点击事件，它似乎就不起作用了。我的猜测是它与 ember.js 有关，坦率地说，我对此一无所知。无论如何，这是代码中不起作用的部分。编辑:如果我在控制台中将它作为单个输入，这会起作用，但在我的其余代码的上下文中不起作用。

$('.send-chat-button').click();

这里发生的是我获取了一段包含聊天提交按钮的 html，它是这样的:

<button class="button primary float-right send-chat-button" data-bindattr-3945="3945">
  <span>
    Chat
  </span>
</button>

当我尝试对此手动触发点击事件时，没有任何反应。但是，当我在 buttonContain.children[0] 和 buttonContain.children 1 上触发手动点击事件时(分别是查看器按钮的设置和列表)，它确实有效。它们看起来像这样:

<a data-ember-action="3943" class="button glyph-only float-left" title="Chat Settings"></a>

我猜区别在于 data-ember-action 和 data-bindattr-*，但我不知道如何让它发挥作用。这里的任何人都知道为什么 click() 事件不起作用而直接单击却起作用？

编辑:如果您对我的问题有任何疑问，请随时提问。

EDIT2:我做了更多的实验，我可以从按钮中删除所有 HTML 属性，点击它仍然有效。我不知道发生了什么:(。

EDIT3:好的，所以它似乎只有在我删除 跨度在按钮内仍然不知道发生了什么。 (是的，也曾尝试在 span 上触发点击事件)

EDIT4:根据要求，这是我这边的所有代码。请注意，我正在尝试从 twitch 本身单击一个按钮，我不拥有任何代码。通过将此代码粘贴到 twitch.tv 流的控制台中使用此代码，然后通过调用 initiateMessageProcessing 启动它。对于很多硬编码值，我很抱歉，这些是我需要的 twitch 字段。现在我只是在寻找概念证明。

var frequency = 5000;
var myInterval = 0;
var lastMessageId = 0;

function initiateMessageProcessing() {
    if (myInterval > 0) {
        clearInterval(myInterval);
    }

    myInterval = setInterval("checkMessages()", frequency);
}

function checkMessages() {
    var chat = document.getElementsByClassName("chat-lines")[0];
    processMessages(extractUnprocessedMessages(chat.children));
    lastMessageId = parseInt(chat.lastElementChild.getAttribute("id").substring(5, 10));
}

function extractUnprocessedMessages(chat) {
    var unprocessedMessages = [];
    var chatId = 0;
    for ( i = 0; i < chat.length; i++) {
        chatId = parseInt(chat[i].getAttribute("id").substring(5, 10));
        if (chatId > lastMessageId) {
            unprocessedMessages.push(chat[i]);
        }
    }
    return unprocessedMessages;
}

function processMessages(unprocessedMessages) {
    var messageElement;
    for ( i = 0; i < unprocessedMessages.length; i++) {
        messageElement = unprocessedMessages[i].children[0].getElementsByClassName("message")[0];
        if (messageElement != undefined && messageElement != null) {
            if (messageElement.innerHTML.search("!test") !== -1) {
                sendMessage('Hello world!');
            }
        }
    }
}

function sendMessage(message) {
    fillTextArea(message);
    var button = $('.send-chat-button').get(0);
    var event = new MouseEvent('click', {
        bubbles : true
    });
    button.dispatchEvent(event);
}

function fillTextArea(message){
    var textArea;
    var chatInterface = document.getElementsByClassName("chat-interface")[0];
    var textAreaContain = chatInterface.children[0];
    textArea = textAreaContain.children[0].children[0];
    textArea.value = message;
}

EDIT5:事件监听器截图:

EDIT6:编辑源代码以使用 $('.send-chat-button').click();我试过这个，在当前代码中不起作用，如果我在聊天中有文本时在控制台中手动触发这个命令，它确实有效。但遗憾的是在我的代码中不起作用。

EDIT7:用过 Ember.run，还是不行。

EDIT8:使用了 dispatchmouseevent，在代码上下文中仍然不起作用

Answer 1

目标站点似乎在没有 JQuery 帮助的情况下附加了事件监听器。如果是这样，则无法使用 jquery .click() 方法触发它。

您可以尝试像这样直接模拟浏览器事件:

var button = $('.send-chat-button').get(0);
var event = new MouseEvent('click', {bubbles: true});
button.dispatchEvent(event);

此代码在 IE8 和更低版本中不起作用，但我想这不是你的情况。