在 OnClick 中防止 OnServerClick？

【问题标题】：Prevent OnServerClick in OnClick?在 OnClick 中防止 OnServerClick？
【发布时间】：2012-09-30 04:37:23
【问题描述】：

我正在使用 ASP.NET，并且我有一个同时具有 onclick 和 onserverclick 的链接。两者都很重要，但我希望 onclick 尽可能阻止 onserverclick 运行。

这是我目前正在玩的项目：

    <ul class="clickables">
        <asp:Repeater ID="MenuRepeater" runat="server">
            <HeaderTemplate>
            </HeaderTemplate>
            <ItemTemplate>
                <li class=" <%# ((DataRowView)Container.DataItem)["CSSClass"]%>" 
                    style="background-color: <%# ((DataRowView)Container.DataItem)["BackgroundColour"]%>">
                    <a id="A1" 
                        runat="server" 
                        onserverclick="LinkClick"
                        onclick=<%# "return javascript:LinkClick('" + ((DataRowView)Container.DataItem)["Postback"] + "')" %>
                        customid='<%# ((DataRowView)Container.DataItem)["UniqueID"]%>'
                        href='<%# ((DataRowView)Container.DataItem)["PageFile"]%>'>
                    </a>
                    <%# ((DataRowView)Container.DataItem)["DisplayName"]%>
                </li>
            </ItemTemplate>
            <FooterTemplate>
            </FooterTemplate>
        </asp:Repeater>
    </ul>

这是我希望停止回发的 JS：

function LinkClick(parameters) {
    if (parameters[0] == "False") {
        return false;
    }

我错过了什么吗？这甚至可能吗？我知道我可以通过在 onclick 中返回 false 来阻止正常的回发，但是我可以停止 onserverclick 吗？

更新 再调试了一下（离开webdev一段时间...），JS函数没有触发...

更新 2

这是完整呈现的页面源代码：

<!DOCTYPE html>
<link rel="stylesheet" type="text/css"
    href="iphone.css" />

<link href="MenuStyles.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="user-scalable=no, width=device-width" />
<script type="text/javascript" src="mootools-core-1.4.5-full-nocompat-yc.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title></head>
<body>
    <form method="post" action="Main.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="YkYtJBVbLo0YmPPXHO5sO8FI5kAxszDeDe/bdeHgDCummp4bGaZKj3W6ihINzdq9PFQT6uCqE2eRXLhF1OEeKh8qJgRJnXWiisrDZ2ivw6JISfxuhIFP1VKKrZET9NIJqrJKpS2namuXzQL+yDJG8WGGvDrQ7oEBMDT6seSXr3zoowlA6tB4+gdbsPJ4utvNKCrhhTImpeXTzeaYCNV3t8QzsiGA7wK51Pgqo9vFQ6LH31NRYJEJ/yfhnnUcoSG6YR8SHNp+j7cGMVMoZPpgLu4bcMNSixHjGW+yin4YN7sf4wtXqQHIGFOwbSHM0VcAxd3is4lUJVYMoBH4pqAjjgBZMuaXPHwDfmZZk3Dk8feyn2btCh0nwXUrkAiAf8n1+a3hs9VfR0JeNs6x0WVzlMxgm4JFzIkthXtJ+632NaNh4rJyvib+j/Vs+HjtRFQXaIDj1fXp2KFniReSjZANiBaepyJqozJghhYnEB8MP1ZOePmrrbLCxUl1MD5Wn2bgFKkNSK25NC1hQoXdnZbEeA==" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<div class="aspNetHidden">

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="zxCYbgjQBAQXVsCg6EwWqRNbeqa/5PzOIgwdhVB5mEasbEk06ik+VT9njAhsM8vF0ymfwdsNmbuX2R7iMJjdpqLMAVABvva4eorpK2PdajpD+g2RzFXI5SEEG9VjwQUXf3kKgb0KnPjWGYQdgZHGDQ==" />
</div>
    <div>
        <div class="button">Back</div>
        <div class="button-bold">+</div>
        <h1>AAR</h1>
        <h2 id="lblQuestion">Please wait for a question...</h2>
        <ul class="clickables">


                    <li class=" arrow" 
                        style="background-color: White">
                        <a id="MenuRepeater_A1_0" onclick="return&#32;LinkClick(&#39;True&#39;)" customid="80f03602-cb67-4d46-99ea-4200459e6a48" href="javascript:__doPostBack(&#39;MenuRepeater$ctl01$A1&#39;,&#39;&#39;)">
                        </a>
                        Question 1
                    </li>

                    <li class=" " 
                        style="background-color: LightGray">
                        <a id="MenuRepeater_A1_1" onclick="return&#32;LinkClick(&#39;False&#39;)" customid="91f76613-ecaa-47df-a5d6-5a921935b1f9" href="javascript:__doPostBack(&#39;MenuRepeater$ctl02$A1&#39;,&#39;&#39;)">
                        </a>
                        Question 2
                    </li>


        </ul>
        <ul class="clickables">

        </ul>
    </div>
    </form>
    <script>
        $$('.clickables').each(function(clickable) {
            var list = clickable.getElements('li');

            list.addEvent('click', function() {
                var link = this.getElement('a');
                if(this.getFirst('a')) {
                    window.location = link;
                }
            });
        });

        function LinkClick(parameters) {
            if (parameters[0] == "False") {
                return false;
            }
            return true;
        }
    </script>
</body>
</html>

编辑 3

即使我这样做：

onclick='return LinkClick(False)'

或

onclick="return LinkClick(False)"

我仍然得到：

onclick="return&#32;LinkClick(&#39;True&#39;)"

编辑 4

这是当前渲染的源代码：

<!DOCTYPE html>
<link rel="stylesheet" type="text/css"
    href="iphone.css" />

<link href="MenuStyles.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="user-scalable=no, width=device-width" />
<script type="text/javascript" src="mootools-core-1.4.5-full-nocompat-yc.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title></head>
<body>
    <form method="post" action="Main.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="ATtNaDBRU6vswFif62qens2E35fTb32GNoGWb9g2UFbg0Pli0sVNrzGeLKgFI41ojer32c0dUpY2F54DIn0L0dQgi7XFwJCum71RivEO8THI+xsj3ACip5IKj0hPTlB0mDtjRUcRAPxTUDJlxNB2ZvpP1nAR8i7b/tsSrF5sP3Xx3JOb59POn4nxVDOTm80j0OAolK09Mo0leI9EzyQWbpig8Q8FaT7eKzCoJ1Z40TNWX24ZKsxsND4ebBfakOnI8qd2lNdBcJ9FrhBCTEJDCQksXs/rhyJXkksaonPGNFdtWMpiIyQDGkT0V6Q+CPt5fFnZZp4fbKZyRVMcs6XdxwHG3qTYJJgnDbfSvnswKce7la8JVSxoWy+dufG6gxIfJK2rKw0mhfQ21y90ZtkaKZ4CeZWB4TveHRhYJVlinC7bwXwKJGXhqcHJeJ0IoinTS+ZgsbuJOo3zHCslpWThP+ib7IVpmFx+nluy31L65Zy7dVoSZeySboBq10C9e1D3Tm0K5Pvcn/ovG7NmRupa+vgrcYEWQgb6QKym1aartoVmtPm1dWZiJzwA9X7j7Wn5mus2XrE5SXqbvp0bANO1rQ==" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<div class="aspNetHidden">

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="vi/Uef51SWAjwpFRuN3fwE5Y2FDB84KMHL6HjRIbWSKMEsSrg2RiGbteExTKFCbKhGe16A7xsn6DzMULMalMxqrg2yi9wkWZb0w2ifgCG6mmU0fH3V6zELQeACrtHDQ+4YlxeZ8k7HfGC592ammq3g==" />
</div>
    <div>
        <div class="button">Back</div>
        <div class="button-bold">+</div>
        <h1>AAR</h1>
        <h2 id="lblQuestion">Please wait for the question...</h2>
        <ul class="clickables">


                    <li class=" arrow" 
                        style="background-color: White">
                        <a id="MenuRepeater_A1_0" onclick="return LinkClick(True);" customid="b88d214b-0d1c-4986-821e-c1650ffbdbfd" href="javascript:__doPostBack(&#39;MenuRepeater$ctl01$A1&#39;,&#39;&#39;)">
                        </a>
                        Question 1
                    </li>

                    <li class=" " 
                        style="background-color: LightGray">
                        <a id="MenuRepeater_A1_1" onclick="return LinkClick(False);" customid="d566775f-4bee-4069-adb0-27e8cf8057d9" href="javascript:__doPostBack(&#39;MenuRepeater$ctl02$A1&#39;,&#39;&#39;)">
                        </a>
                        Question 2
                    </li>


        </ul>
        <ul class="clickables">



        </ul>
    </div>
    </form>
    <script>
        $$('.clickables').each(function(clickable) {
            var list = clickable.getElements('li');

            list.addEvent('click', function() {
                var link = this.getElement('a');
                if(this.getFirst('a')) {
                    window.location = link;
                }
            });
        });

        function LinkClick(parameters) {
            if (parameters[0] == "False") {
                return false;
            }
            return true;
        }
    </script>
</body>
</html>

更新 5

所以如果我离开该方法并只返回真/假，它应该停止回发吗？这不起作用（更多渲染源）。

<!DOCTYPE html>
<link rel="stylesheet" type="text/css"
    href="iphone.css" />

<link href="MenuStyles.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="user-scalable=no, width=device-width" />
<script type="text/javascript" src="mootools-core-1.4.5-full-nocompat-yc.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title></head>
<body>
    <script>
        function LinkClick(parameters) {
            if (parameters[0] == "False") {
                return false;
            }
            return true;
        }
    </script>
    <form method="post" action="Main.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="PiZp7nhFhCoiWV3slT5szv5Z5GAkeDWYHj7QpAPmnwSoKxWg6Zm9HTQGkZXS2Osddx6KwS0eGu/ZMaLjgxVBm1U+Eszzf/OjmAbB78jPAeSwW8GwXRUUp984a7cPZc9cYajKHkhBVtuuALV6HSsT3oRzEPlziohjgWGiV8HFAEOd1CWTj+RAC3B/mWcmrFcexzpR1XhQgnV5LQC7GplUB9Y2E/rb8MFQHfYsRxG5GjWJ5zqe51FhwstLL/dbSklaBkRlFHyFyZNUeA74My6AHCOAWbUjZ42sVcMjaSVnM1zZsxQtSG8+UdbshaLZ9Gz5SOB0Vq4fS8J+TrUlswsSLqQ77Q+m2ouZG+jhPf7jKC59KvIYGlKHkgYVqCvhqhkIG91xg7k9M3f5KAf0yOB6yaesVxnWBCC+UQWcKRePIV9tq2eE8C+8F+rLCPJ6RXgUzpC+DvVmlQMHzmiXWLehtymb2HRX4O/2RUJxLDlVP/8=" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<div class="aspNetHidden">

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="aQDXp34k4YJiEBt3URBFL0do/c8NXsEmuBtFz8JLRhtXerYXPFYRZmyXIpCef68aO7itJ4EUwQ9eXl2KkxDndTmS4149nNN8BX3AoFLDgB0b4w6cNsn3nzoZ3ENnU4vExyeHdXVJyyVwmZruhoQ7GA==" />
</div>
    <div>
        <div class="button">Back</div>
        <div class="button-bold">+</div>
        <h1>AAR</h1>
        <h2 id="lblQuestion">Please wait for a question...</h2>
        <ul class="clickables">


                    <li class=" arrow"
                        style="background-color: White">
                        <a id="MenuRepeater_A1_0" onclick="return true;" customid="b88d214b-0d1c-4986-821e-c1650ffbdbfd" href="javascript:__doPostBack(&#39;MenuRepeater$ctl01$A1&#39;,&#39;&#39;)"></a>
                        Question 1
                    </li>

                    <li class=" "
                        style="background-color: LightGray">
                        <a id="MenuRepeater_A1_1" onclick="return false;" customid="d566775f-4bee-4069-adb0-27e8cf8057d9" href="javascript:__doPostBack(&#39;MenuRepeater$ctl02$A1&#39;,&#39;&#39;)"></a>
                        Question 2
                    </li>


        </ul>
        <ul class="clickables">

        </ul>
    </div>
    </form>
    <script>
        $$('.clickables').each(function (clickable) {
            var list = clickable.getElements('li');

            list.addEvent('click', function () {
                var link = this.getElement('a');
                if (this.getFirst('a')) {
                    window.location = link;
                }
            });
        });
    </script>
</body>
</html>

【问题讨论】：

  • 元素在浏览器中的呈现效果如何？
  • 我用 CSS 将它渲染成一个菜单...我已经更新了我的代码，在 LI 项周围添加了一些额外内容。
  • 抱歉，我删除了最后一个 cmets，因为我在 发布它们之后阅读了其他答案...最后一件事，使用 而不是 ?
  • @CrisimIlNumenoreano，运气不好……最后一件事？该死的...我想我需要史酷比的工作人员来处理这个...
  • 必须去睡觉（在意大利是 23:17）但是最后一件事，为什么不尝试使用 而不是 ？祝你好运，未解之谜

    • 标签： javascript asp.net onclick postback dom-events


    【解决方案1】：

    您不应该使用onclick=&lt;%# .... %&gt;，因为它会自动对输出进行编码。

    应该是这样的：

    <a onclick="javascript:return LinkClick('<%# ((DataRowView)Container.DataItem)["Postback"] %>')" href="something"></a>

    您的输出 return&amp;#32;LinkClick(&amp;#39;True&amp;#39;) 甚至不是 javascript 调用。这就是您看不到任何错误的原因。

    关于 asp.net 内联表达式的有用链接： http://support.microsoft.com/kb/976112

    【讨论】：

    • 您好，您的 html 无效（服务器标签格式不正确。）
    • 是的，这是一个简单的例子，但可以解释问题。这就是用 包装完整的属性值。我认为这很清楚。
    • @nNenad - 我明白你在说什么，但据我所知，没有办法按照你的方式去做。我把整个东西都包在一个标签里，因为我不得不这样做。如果我没有收到标签错误（上图）。
    • Ups，修正错字。没用，嗯。不知道你是如何树立榜样的。在最坏的情况下，您可以使用 ，但在这种情况下，您必须确保 Html 正确编码数据。关于内联表达式的使用有很好的链接，我只是将它添加到帖子中。
    • 即使只是直接调用，我也能得到 html 实体代码......这太疯狂了。感谢您的链接，我会阅读并查看它是否有帮助，但是由于无法正常通话，我不知道该怎么办！
    【解决方案2】：

    非常感谢大家的帮助。问题是 .NET 的 XSS 东西（内置，通过配置文件自动与你搞砸..）

    一旦我删除了这条线，它就起作用了，我想我将服务器变量放入 JS 的方式让我的网站认为它受到了攻击......无论如何它都会成为一个私人网站，所以 XSS 被关闭了.如果有人能找到更好的解决方案（更安全），请发帖，我会尝试...

    <httpRuntime requestValidationMode="4.5" targetFramework="4.5" encoderType="System.Web.Security.AntiXss.AntiXssEncoder, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />

    ^^ 从 Web.config 中删除该行（后果自负）...

    【讨论】：

    【解决方案3】：

    你检查过parameters[0] == "False"吗？可能是字符串比较问题？或者可能是您的文本实际上在链接标签之外：

    <a id="A1" 
    runat="server" 
    onserverclick="LinkClick"
    onclick=<%# "return javascript:LinkClick('" + ((DataRowView)Container.DataItem)["Postback"] + "')" %>
    customid='<%# ((DataRowView)Container.DataItem)["UniqueID"]%>'
    href='<%# ((DataRowView)Container.DataItem)["PageFile"]%>'>
</a>
<%# ((DataRowView)Container.DataItem)["DisplayName"]%>

    应该是：

    <a id="A1" 
    runat="server" 
    onserverclick="LinkClick"
    onclick=<%# "return javascript:LinkClick('" + ((DataRowView)Container.DataItem)["Postback"] + "')" %>
    customid='<%# ((DataRowView)Container.DataItem)["UniqueID"]%>'
    href='<%# ((DataRowView)Container.DataItem)["PageFile"]%>'>
    <%# ((DataRowView)Container.DataItem)["DisplayName"]%>
</a>

    【讨论】：

    • 我已经更详细地更新了我的问题。 DisplayName 标记应该是它所在的位置，因此它被呈现为 li 文本而不是 a 文本的一部分。
    • 但是，是什么赋予了a 标签任何维度？
    • 我不确定你的意思。我刚刚再次更新了我的问题，问题似乎是 JS 没有触发......我一定有什么问题......
    • 服务器端点击触发了吗？ （即页面是否回发？）我所说的“维度”是指a 标签内没有任何内容，它没有宽度或高度，因此无法点击。
    • 尝试将文本放在a 标签内，看看它是否有效。
    【解决方案4】：

    如果我理解了您的问题，那么由于 onclick 事件中发生的某些事情而抑制 onserverclick 非常简单：

    <span class="psw">Forgot <a href="" runat="server" onclick="return checkForRequiredEmailAddress();" onserverclick="ForgotPassword">password?</a></span>

    这是我的一个页面上的实际忘记密码链接。除非存在有效的电子邮件地址，否则永远不会触发 onserverclick 事件中指定的 ForgotPassword() 方法背后的代码。

    “checkForRequiredEmailAddress”方法检查其存在、结构和正确性，然后根据检查结果返回真或假。

    我知道你的问题是说你试过这个，但它肯定对我有用，所以我只能假设它是愚蠢的。也许点击事件中缺少的分号会有所不同。

    【讨论】：

      猜你喜欢
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode