click() 的行为不像用户点击答案

【问题标题】：click() not behaving like user clickclick() 的行为不像用户点击
【发布时间】：2010-03-15 20:45:10
【问题描述】：

过去几个小时我一直在寻找解决方案，但无济于事。当我单击 OnClientClick 中返回 false 的按钮时，服务器不会发生回发。当我使用 jquery 触发按钮的点击功能时，首先触发 OnClientClick，但无论返回值如何，都会发生回发。这是一个简单的示例...

k...放置更准确地演示问题的代码。很抱歉混淆了...

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="script/jquery-1.4.2.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <img onclick="$('#Button1').click();" runat="server" width="100" height="100" style="border:solid 1px black" /><br />
        <asp:Button ID="Button1" OnClick="Button1_Click" OnClientClick="return false;" runat="server" Text="Button" />
    </div>
    </form>
</body>
</html>

回答一些被问到的问题...我有一个用户控件。它是一个使用两个图像和一个隐藏按钮来调用服务器的翻转按钮。该按钮使用反射来启用任何指定的 OnClick 处理程序，以调用控件所在的特定页面上的函数。如果需要，OnClientClick 还用于提供额外的 Javascript 操作。当我直接连接了一个不可见但可点击的按钮时，一切正常。我决定让按钮真正不可见，甚至不显示它，但这需要我让图像真正触发按钮的点击事件。

【问题讨论】：

不能只使用ImageButton控件有什么原因吗？
我已经尝试使用 ImageButton 控件来处理“over”图像，但是它不会将 Alt 文本完全呈现给 img。当图像关闭时，副作用是一些非常奇怪的过渡。我想我是一个完美主义者，希望有一个按钮，就像一个按钮，但也有自定义淡入淡出。我可能不得不妥协。
你想完成什么？您希望服务器按钮触发回发吗？你想点击按钮而不触发回发吗？为什么？

标签： javascript jquery events click onclientclick

【解决方案1】：

runat="server" 表示需要回发。如果您没有为 Button1 获取它，可能是因为您在同一个标记中有一个 OnClick 和一个 OnClientClick，并且组合覆盖了 runat 属性。

【讨论】：

不确定我是否遵循您的推理。当我直接单击按钮时，它工作正常。为什么这会通过 jquery 触发器改变？

【解决方案2】：

jQuery 的 click 方法不会像 OnClick 方法那样返回 true 或 false ——而是返回对自身的引用。这是为了方便 jQuery 方法调用的链接。

理想情况下，您想要的是从 Button1 和 Button2 的 javascript 中调用相同的方法，而不是让一个按钮调用另一个按钮。如果您需要一些需要回发的条件，您可以在其中调用 Button1.GetPostbackEventReference。

如果您使用 CSS 类来处理它，jQuery 也会让这变得非常简单：

<asp:Button ID="Button1" CssClass="ButtonHandler" />
<asp:Image ID="Button2" CssClass="ButtonHandler" />

<script>
$(document).ready(function() {
    $(".ButtonHandler").click( function() {
        // stuff you want to do
        return false;
    });
});
</script>

这可能不是你真正需要的，但我认为你需要更详细地了解你想要什么。

【讨论】：

这可能在使用 MS 服务器回发模型时出现问题。
我确实有 jQuery 代码已经绑定到按钮以启用图像的淡入淡出效果，但是按钮提交行为仍然需要连接。

【解决方案3】：

我认为您误解了 jQuery click 处理程序在此上下文中的用途，并且您没有在 onClientClicked 事件中返回 false。

没有理由使用 onClientClicked 属性为服务器端按钮或图像连接 jQuery 点击处理程序。只需将其中的脚本调用连接到您需要执行的任何脚本即可。

像这样：

<asp:Button ID="Button2" runat="server" Text="Trigger" onClientClick="doClientSideCheck();" />

<script type="text/javascript">
  function doClientSideCheck()
  {
    return false;
  }
</script>

另一方面，当您有客户端按钮或图像时，这是 jQuery 点击处理程序的合适位置。

<input id="button1" type="button" class="myButtonClass" value="Submit" />

    <script type="text/javascript">
     $(document).ready(function()
        {
             $(".myButtonClass").click(function(e) { alert('button clicked ' + $(this).attr('id') ); });
         });
    </script>

【讨论】：

Button2 不是我的应用程序中的按钮，而是图像。我猜是个糟糕的例子。 Button2 实际上是一个 onclick 指向 Button1 的图像。
我认为 jQuery 中 .click() 事件的目的是执行类似于用户手动单击的操作。我不想为每个函数显式编写 Javascript。我确实意识到 OnClientClick 连接到 onclick 因为这就是我将它连接到我的控件中的方式。想法是直接触发隐藏按钮，并使用其定义的 onclick 执行必要的操作。
你试图做的是一个黑客，并且肯定会遇到不同浏览器的问题。为什么不只使用 asp:ImageButton 并将 onClientClick 设置为一些被调用的客户端 JS？如果需要，您可以将 jQuery 行为附加到它以处理翻转状态更改。主要思想是确保点击动作由一个框架而不是两个框架处理。
我没有考虑过使用一个控件触发对另一个控件的点击是一种黑客行为，而是另一种解决问题的方法。正如我所说，我最初使用了一个与下面的图像大小相同的不可见图像按钮（使用透明 gif 作为背景）。我对这种方法并不特别满意，因为它也是一种“hack”，因为我只是使用按钮，因为它能够反映到另一个功能。我很想知道为什么 jQuery.click() 的行为与用户点击不同，这是我最初的问题。
一般 jQuery.click() 的行为与普通用户点击一样。当元素具有绑定到 onClick 的非 jQuery 脚本（即 asp.net 回发处理程序）时，您开始遇到麻烦。我没有花时间调查为什么会这样，我怀疑这与 MS 和 jQuery 脚本如何结束该事件的顺序有关，并且浏览器似乎有不同的结果浏览器。在某些情况下它有效，但它几乎不是一个解决方案！