有没有办法在不添加活动的情况下对点击做出反应？

Question

我正在使用这个优秀的Chrome扩展程序Visual Event，它可以直观地显示附加到网站元素的JS事件。

使用它，我注意到似乎有其他方法可以使用非事件的JavaScript对点击做出反应？

例如，以下页面有一个用JavaScript编程的对话框，但Visual Event不显示任何事件：

https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2014/accessible.html

在查看源代码时，我看到它使用.addEventListener（一个普通的JS函数？）而不是.click（一个jQuery函数？）。我创建了一个包含两种变体的演示页面：

http://codepen.io/jmuheim/pen/jqBodO

但这似乎并不是唯一的区别。因为当我使用像NVDA这样的屏幕阅读器时，它会通知clickable对点击产生反应的元素 - 但它似乎无论如何都不会这样做。

在第一个例子（模态窗口）中，NVDA根本没有说clickable：

在我的示例中，NVDA为这两个元素宣布clickable：

所以我对在JavaScript中点击的不同方式感到困惑，因为似乎至少有3种不同的类型：

• 一个使用.click，由NVDA宣布为clickable并由Visual Event显示
• 一个使用.addEventListener由NVDA宣布（而不是由视觉事件显示）
• 一个使用.addEventListener未被NVDA宣布（并且未被视觉事件显示）

有人可以告诉我这里的不同之处吗？谢谢。

Answer 1

有几个问题，

实际上在您的第一个示例中，不是任何绑定事件绑定到表单。

只需使用html submit按钮提交表单即可。以下是该演示的源代码。

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" class="input" placeholder="Gimmie ur Name">

    <label for="email">Email:</label>
    <input type="email" id="email" class="input" placeholder="Gimmie ur Email">

    <input type="submit" class="btn" value="Submit Form">
  </form>

这是Form sample code from w3school.

.addEventListener和.onclick是纯粹的javascript函数。 .click由jQuery定义。

addEventListener from MDN

onclick from MDN

.click from Jquery

对于 Visual Event 和 NVDA 之间的差异，这就是Visual Event捕获您的事件的方式。 （仅点击？）

希望这可以解决您的问题。