Google 翻译中 div 的单击或鼠标松开事件

Question

我正在编写一个 JavaScript 书签来创建 Google Translate 的快捷方式。例如，输入 ESC 或 \ 将清除 TextArea。现在我想添加一个快捷方式，当输入 ] 时，将交换翻译语言；和 \ 将发音文本。

每个事件都包含在

div#gt-lang-swap

和

div#gt-src-listen

中，但我无法在控制台中触发这些事件。

我尝试过：

document.getElementById("gt-lang-swap").click()

但是什么也没发生。这也不起作用：

e = document.createEvent("MouseEvents")
e.initMouseEvent("mouseup", true, true, window, 1, 0, 0, 0, 0,
    false, false, false, false, 1, null)
document.getElementById('gt-src-listen').dispatchEvent(e)

有人有什么想法吗？

Answer 1

您是否尝试过

onclick

而不仅仅是

click

？

document.getElementById("gt-lang-swap").onclick=function(){

   console.log('clicked it');

   //Other stuff that should happen...
}

或者，尝试创建一个函数来触发事件（该函数取自here）

function fireEvent(element,event){
    if (document.createEventObject){
       // dispatch for IE
       var evt = document.createEventObject();
       return element.fireEvent('on'+event,evt)
    }
    else{
       // dispatch for firefox + others
       var evt = document.createEvent("HTMLEvents");
       evt.initEvent(event, true, true ); // event type,bubbling,cancelable
       return !element.dispatchEvent(evt);
    }
}

随后：

<input type="text" id="test">
<script>
   obj = document.getElementById("test");
   Event.observe(obj,'change',function(){alert('hi');});
   fireEvent(obj,'change');
</script>

应该可以解决问题...

注意：正如评论和链接文章中提到的，这个答案有 prototype 库的先决条件...... 因此，它可能不是（经过讨论）这个问题的理想答案。

请参阅此处了解更多

Answer 2

我也无法触发该按钮上的单击事件，但我认为您不需要这样做，因为您只需修改 URL，UI 就会相应更新：

var components = window.location.hash.substr(1).split('/');
window.location = '#' + components[1] + '/' + components[0] + '/' + components[2];
document.getElementById('source').select(); // optionally focus user back into source field

例如，如果 url 是

#es/en/hola%20amigo

，此代码会交换前两个语言键，使其变为

#en/es/hola%20amigo

。

我想您甚至可以使用

document.getElementById('result_box')

获取翻译后的文本并将其放入源字段中！

如果您更新扩展程序，请告诉我，我很乐意使用它。

编辑：刚刚意识到这个问题已经有近两年的历史了。希望有人觉得它有用:)

Answer 3

有点晚了，但是： 如果你想为任何元素放置一个监听器，js 必须使用 addEventListener 示例：

const whereverElement = document.getElement[wherever selector you prefer]
whereverElement.addEventListener('change', function (e) {
    // your code after the event happened here
}

你可以将元素绑定到任何你想监听的事件：['change', 'click', 'mouseup', 'mousedown']，只要看看你需要什么。