Question

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

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

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

这是有效的，因为最后的return false;语句。我现在想要更改函数以使用e.stopPropagation()而不是html中的return false;。我被告知这是更好的方法，但我不能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()很少适用。那么为什么不说你想要哪一个呢？（或两者兼得！）
return false。想象一下onclick上的a执行some_action()，然后return false阻止默认值。如果some_action()引发错误，则默认操作将不取消，您可能会在某些您不期望的地方结束。

showFilterPanel(this);

this将指向HTML元素（FilterButton）

showFilterPanel(event);

将尝试引用全局变量event（它不存在）

showFilterPanel(e);

将尝试引用全局变量e（它不存在）

在旧版浏览器（Internet Explorer）中，有一个全局变量event（通常为window.event），其中包含最新事件。如果您使用符号，则可以更轻松地获取活动。我不是这种方法的忠实粉丝。我不喜欢全球依赖。

Javascript onclick：如何传递事件变量？

1 个答案: