Question

无法通过Chrome上的Javacript控制台在“ tr”元素上触发 onmouseup 事件。

该元素是这样的（抱歉，无法共享确切的代码）：

< tr class="one" style="height:20px;" onmouseup="click(event,this)"> Text </tr>

在控制台中，我执行了以下步骤：

document.getElementsByClassName("one")[0].onmouseup()

我得到了错误：

Uncaught TypeError: Cannot read property 'metaKey' of undefined
    at Object.i [as click] (filename:linenumber)
    at HTMLTableRowElement.onmouseup (Workbox?ajax:1)
    at <anonymous>:1:45

在随附的js源文件中，在给定行号的函数i中，正在检查 event.metaKey ：

    n = b.metaKey || b.ctrlKey

在这一行中，显示错误。

亲自（鼠标）单击时，此事件有效。当我使用该命令执行相同操作时，它将无法正确运行。由于此“ metaKey”未正确传递给它。我可以通过onmouseup（）调用传递它吗？还有其他办法吗？无论如何，在mouseEvents上下文中，metakey甚至指的是什么？在其他问题上，有人说“ Win”键是metaKey。但是当手动单击时，我没有按下任何其他键，只是按下了鼠标。在那里工作如何？

我的最终目标是在同一元素上调用相同的函数 onmouseup ，但使用Java中的硒库。我还对使用xpath获得的元素使用JavaScript Executor。它在那里也给出相同的错误。因此，如果这行得通，它也应该在那里。

我仔细检查了是否选择了同一元素，而不是其他元素。我该怎么解决这个问题？

Answer 1

就像@teemu在评论中说的那样，您正在做的不是触发一个事件，仅是对函数onmouseup()的调用。问题是此调用没有示例中称为b的事件参数，因此n = b.metaKey || b.ctrlKey是n = undefined.metakey || undefined.ctrlKey

要创建mouseup事件，请使用：

newEvt = new MouseEvent("mouseup", {
    bubbles: true,
    cancelable: true,
    screenX: <your wanted X value>,
    screenY: <your wanted Y value>,
    clientX: <your wanted X value>,
    clientY: <your wanted Y value>
});

// screenX, screenY, clientX and clientY are optionals and default to 0

document.getElementsByClassName("one")[0].dispatchEvent(newEvt);

请参阅MDN MouseEvent文档：https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

关于metakey，它们对应于Mac上的windows key或⌘key（来源：https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey）

Answer 2

通过这种方式，您可以将事件与所需的数据绑定（以修复错误或任何其他原因）-

var e = new Event('mouseup');
document.getElementsByClassName("one")[0].trigger(e);

Answer 3

onmouseover和onmouseout

< tr class="one" style="height:20px;" onmouseover ="click('first value','2nd value')"> Text </tr>

和 onmousedown =“ mouseDown（）” onmouseup =“ mouseUp（）”

这是示例

function mouseDown() {
    document.getElementById("myP").style.color = "red";
}

function mouseUp() {
    document.getElementById("myP").style.color = "green";
}

<p id="myP" onmousedown="mouseDown()" onmouseup="mouseUp()">
Click the text! The mouseDown() function is triggered when the mouse button is pressed down over this paragraph, and sets the color of the text to red. The mouseUp() function is triggered when the mouse button is released, and sets the color of the text to green.
</p>

<script>
function mouseDown() {
    document.getElementById("myP").style.color = "red";
}

function mouseUp() {
    document.getElementById("myP").style.color = "green";
}
</script>

无法通过Chrome上的JavaScript控制台触发元素上的onmouseup事件

3 个答案: