JavaScript onclick : how to pass the event variable?

Question

我有一个<asp:Panel> ，当用户单击它时，我想显示 <div>使用 JavaScript。我这样做是为了防止需要回发到服务器(我想要一个高度交互的客户端显示/隐藏子内容)。我使用以下代码:

<asp:Panel runat="server" ID="FilterButton" OnClick="showFilterPanel(); return false;"/>

function showFilterPanel()
{
    //do some code that shows the div...
}

这之所以有效，是因为 return false;声明在最后。我现在想更改函数以使用 e.stopPropagation()而不是 return false;在 html 里面。有人告诉我这是更好的方法，但我不能 100% 确定“return false;”和“e.stopPropagation()”之间有什么区别，以及为什么一个比另一个更好。

无论哪种方式，我都不知道如何传递事件的正确语法。我尝试了以下方法，但参数 e 未正确传递:

<asp:Panel runat="server" ID="FilterButton" OnClick="showFilterPanel(sender);"/>

function showFilterPanel(e)
{
    //do some code that shows the div...
    e.stopPropagation();
}

以下似乎也不起作用:

<asp:Panel runat="server" ID="FilterButton" OnClick="showFilterPanel(this);"/>
<asp:Panel runat="server" ID="FilterButton" OnClick="showFilterPanel(event);"/>
<asp:Panel runat="server" ID="FilterButton" OnClick="showFilterPanel(e);"/>

我通过在函数运行时使用警报消息并检查 JavaScript 错误来测试正确性。我得到的错误是:“e 未定义”和“stopPropagation 不是对象的方法”。

Answer 1

您无法传递事件参数，因为您没有它。

获取方法是使用addEventListener注册事件。

var elm = document.getElementById("FilterButton");
elm.addEventListener("click", function (event) {
    event.stopPropagation();
});

您还可以这样做:

elm.onclick = function (event) {
    event.stopPropagation();
};

但是如果您想添加多个事件监听器，此表示法会导致问题。

<小时/>

e.stopPropagation() 更好，因为:

• return false 也执行 e.preventDefault() 操作。我见过的大多数使用 return false 的实例，其意图实际上是 preventDefault()，而不是 stopPropagation()。 stopPropagation() 很少适用。那么为什么不说出你想要哪一个呢？ (或两者兼而有之!)

如果函数中发生 Uncaught Error ，则不会调用

• return false。想象一下 a 上的 onclick 执行 some_action()，然后通过 return false 阻止默认行为。如果 some_action() 抛出错误，默认操作将不会被取消，并且您可能会到达意想不到的地方。

<小时/>

showFilterPanel(this);

this 将指向 HTML 元素 (FilterButton)

<小时/>

showFilterPanel(event);

将尝试引用全局变量event(该变量不存在)

<小时/>

showFilterPanel(e);

将尝试引用全局变量e(该变量不存在)

<小时/>

在旧版浏览器 (Internet Explorer) 中，有一个全局变量 event(通常为 window.event)，其中包含最新事件。如果您使用符号，这可以更轻松地获取事件。我不太喜欢这种方法。我不喜欢全局依赖。