单击由 div 和 JavaScript 制成的按钮？答案

【问题标题】：Click a button made from div with JavaScript?单击由 div 和 JavaScript 制成的按钮？
【发布时间】：2011-09-27 08:21:12
【问题描述】：

在 Google+ 中，用于发表评论的按钮是由 div 制成的：

<div role="button" id=":1vq.post" class="d-s-r tk3N6e-e tk3N6e-e-qc" aria-disabled="false" style="-webkit-user-select: none; " tabindex="0">Post comment</div>

我想我可以点击它：

document.getElementById(":1vq.post").click();

但是它说元素没有属性click，我发现onclick是空的。那么如何使用 JavaScript 来点击按钮呢？

【问题讨论】：

$ 是什么？ Prolly，你用错了。无论如何，我怀疑 Google 会在界面元素上使用持久 ID。
他们可能已经在使用 jquery 来启用它。我会尝试查看 Chrome 开发工具中的元素，我相信这会显示代码已完成。可能会有所帮助。（我很想看看，但还没有 Google+）
@katspaugh 我认为谷歌定义了它： $ bound: function () { return document.getElementById.apply(document, arguments) }
@Drazisil 这是代码 $(":1vq.post") 显示的内容：
发表评论
跨度>
可能有一段代码可以根据“角色”将事物应用于 div，然后我会寻找它。

标签： javascript dom-events google-plus

【解决方案1】：

click() 仅适用于 input 和 button 等元素。

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2651361

onclick 将出现在 1990 年，而不是在 Google。他们应该使用addEventListener。

尝试设置断点并查看单击时调用了什么函数。然后直接调用函数。

要触发点击事件处理程序，可以使用createEvent 加上dispatchEvent。

查看示例：http://jsfiddle.net/DzVg9/

请注意，Google Plus 可能实际上正在使用 mousedown 或 mouseup 事件。

【讨论】：

那我怎么能用JavaScript点击它呢？我注意到扩展 Vimium 可以做到这一点。
@wong2，安装 Firefox 和 Firebug，在“脚本”选项卡上按“Break on next”，然后单击相关按钮。
他们实际上在使用addEventListener。问题是，你能触发听众吗？
是的，你可以 -- 通过createEvent/dispatchEvent，一定有人已经提到过。

【解决方案2】：

编辑：在与开始这个问题的 wong2 聊天后，对这个问题的真正含义有很多失败的猜测（这个问题写得很糟糕），他们试图做的是编写一个 Greasemonkey 用户脚本来制作回车键按下 Google+ 信息流中的“发表评论”按钮。由于我还没有 Google+ 的邀请，我什至看不到相关代码，所以我无能为力。这个问题不是要在您自己的网站中添加任何与 Google+ 相关的内容，而是要尝试使用 Greasemonkey 在您自己的浏览器中修改 Google 网站的行为。

早期的帮助尝试：

id=":1vq.post" 不是合法的 CSS id 名称。您不能在选择器名称中使用“:”字符。这会导致多个问题，因为它不仅不是合法字符，而且在 CSS 选择器语法中也是一个有意义的字符。所以，我看到你有两个问题。

首先，您的选择器逻辑不起作用。其次，正如其他人所说，您不能只使用普通的javascript（例如，没有框架）以这种方式分配点击。

如果您更改选择器逻辑以使其正常工作，则可以使其正常工作（使用 jQuery），如下所示：

<div role="button" id="aPost" class="d-s-r tk3N6e-e tk3N6e-e-qc" aria-disabled="false" style="-webkit-user-select: none; " tabindex="0">Post comment</div>

$("#aPost").click(function() {
    alert("I was clicked.");
});

而且，你可以在这个 jsFiddle 中看到它的实际效果：http://jsfiddle.net/jfriend00/Yfnc7/。点击运行，然后点击发表评论。

【讨论】：

如果您能指出您从 Google 获得该代码的位置，我会看看。我在 Google 上找不到任何类似的代码，Google 搜索引擎也找不到。
我说过它来自 Google+ 的发表评论按钮
我在他们的网站上找不到。如果您发布指向它的链接，我会弄清楚为什么您的东西不起作用。如果你不想指点我，我将无法提供任何进一步的帮助。这是非法的 HTML/CSS，我不相信 Google 会直接推荐它，因此在某处可能存在一些误解。如果你想让我帮忙解决这个问题，请指出你是从哪里得到它的。
也许我很密集，但我在plus.google.com 页面上的任何地方都找不到您发布的代码，而且我没有看到您引用的“索引”页面。指向该页面的直接链接可以让我立即到达那里。我找到的加一代码在这里：google.com/webmasters/+1/button，它看起来一点也不像你的。
@jfriend00 让我们continue this discussion in chat

【解决方案3】：

您确定您正确选择了带有$(":1vq.post") 的按钮吗？也许您需要将其更改为 $("#:1vq.post") 或类似的东西（我不确定 JQuery 如何处理 : 和 . 字符）。

【讨论】：

不，不是JQuery，好像google把$定义为function(){return document.getElementById.apply(document, arguments)}
那么也许使用完整的JQuery(...) 而不是$(...) 就足够了？
Google+ 好像没有使用 JQuery