Нажмите кнопку, сделанную из div с помощью JavaScript?

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


person wong2    schedule 02.07.2011    source источник
comment
Что такое $? Вероятно, вы используете его неправильно. В любом случае, я сомневаюсь, что у Google будут постоянные идентификаторы для элементов интерфейса.   -  person katspaugh    schedule 02.07.2011
comment
Вероятно, они уже используют jquery для его включения. Я бы попробовал посмотреть на элемент в инструментах разработчика Chrome, я считаю, что он показывает готовый код. Может помочь. (хотелось бы посмотреть, но пока нет Google+)   -  person Drazisil    schedule 02.07.2011
comment
@katspaugh Я думаю, что Google определил это: $bound: function () { return document.getElementById.apply(document, arguments)}   -  person wong2    schedule 02.07.2011
comment
@Drazisil Вот что показывает код $(:1vq.post): ‹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›​Опубликовать комментарий​‹/div›​   -  person wong2    schedule 02.07.2011
comment
Вероятно, есть блок кода, который применяет вещи к div на основе «роли», тогда я бы поискал его.   -  person Drazisil    schedule 02.07.2011


Ответы (3)


РЕДАКТИРОВАТЬ: после чата с wong2, который начал этот вопрос, и множества неудачных предположений о том, о чем этот вопрос на самом деле (вопрос довольно плохо написан), они пытаются написать пользовательский скрипт Greasemonkey, чтобы сделать клавишу ввода нажмите кнопку «Опубликовать комментарий» в потоках Google+. Поскольку у меня еще нет приглашения в Google+, я даже не вижу соответствующий код, поэтому мало что могу сделать. Этот вопрос не о размещении чего-либо, связанного с Google+, на вашем собственном сайте, а о попытке использовать Greasemonkey для изменения поведения сайта Google в вашем собственном браузере.

Предыдущие попытки помочь:

id=":1vq.post" не является допустимым именем идентификатора CSS. Вы не можете использовать символ «:» в имени селектора. Это вызывает множество проблем, потому что это не только недопустимый символ, но и значимый символ в синтаксисе селектора 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/. Нажмите «Выполнить», а затем нажмите «Опубликовать комментарий».

person jfriend00    schedule 02.07.2011
comment
Если вы можете указать мне, где вы получили этот код от Google, я посмотрю. Я не могу найти код от Google, который выглядит так, как и поисковая система Google. - person jfriend00; 03.07.2011
comment
Я сказал, что это из кнопки комментирования в Google+. - person wong2; 03.07.2011
comment
И я не могу найти это на их сайте. Если вы разместите ссылку на него, я выясню, почему ваш материал не работает. Если вы не хотите указать мне на это, я не смогу больше помочь. Это незаконный HTML/CSS, и я не верю, что Google рекомендует его напрямую, поэтому, вероятно, где-то есть недопонимание. Если вы хотите, чтобы я помог разобраться с этим, пожалуйста, укажите мне, откуда вы это взяли. - person jfriend00; 03.07.2011
comment
Может быть, я туплю, но я не нахожу код, который вы разместили, нигде на странице plus.google.com и я не вижу индексной страницы, на которую вы ссылаетесь. Прямая ссылка на страницу привела бы меня туда сразу. Код плюс один, который я нашел, находится здесь: google.com/webmasters/+1/ кнопку и она совсем не похожа на вашу. - person jfriend00; 03.07.2011
comment
@jfriend00 давайте продолжим обсуждение в чате - person wong2; 03.07.2011

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.

person katspaugh    schedule 02.07.2011
comment
Тогда как я мог щелкнуть по нему с помощью JavaScript? Я заметил, что расширение Vimium может это сделать. - person wong2; 02.07.2011
comment
@wong2, установите Firefox и Firebug, на вкладке «Сценарий» нажмите «Разрыв», затем нажмите кнопку, о которой идет речь. - person katspaugh; 02.07.2011
comment
На самом деле они используют addEventListener. Вопрос в том, можете ли вы вызвать слушателя? - person Drazisil; 09.07.2011
comment
Да, вы можете -- через createEvent/dispatchEvent, кто-то, должно быть, уже упоминал об этом. - person katspaugh; 09.07.2011

Вы уверены, что правильно выбираете кнопку с $(":1vq.post")? Возможно, вам нужно изменить его на $("#:1vq.post") или что-то в этом роде (я не уверен, как JQuery обрабатывает символы : и .).

person hugomg    schedule 02.07.2011
comment
Нет, это не JQuery, кажется, Google определяет $ как функцию () { return document.getElementById.apply(document, arguments)} - person wong2; 02.07.2011
comment
Тогда, возможно, будет достаточно использовать полный JQuery(...) вместо $(...)? - person hugomg; 02.07.2011
comment
Кажется, Google+ не использовал JQuery - person wong2; 02.07.2011