能否在 span 标签上应用 onclick() 事件?

13
为了确保事件处理程序编写正确,通常我会让Visual Studio为我生成事件。但是,我无法找到一种在div元素上生成事件的方法,即使我自己输入代码也不行。是否可以在不编写任何JavaScript的情况下实现这一点?(我看到了类似的问题,但似乎没有符合我的需求的内容)。
编辑:基本上,我有一个伪装成按钮的注销div。当他们点击它时,我希望发生以下操作:
 protected void LogOff_Click(object sender, EventArgs e)
    {
        FormsAuthentication.SignOut();
        Session.Abandon();

        //This will clear the authentication cookie
        HttpCookie myHttpCookie = new HttpCookie(FormsAuthentication.FormsCookieName, "");
        myHttpCookie.Expires = DateTime.Now.AddYears(-1);
        Response.Cookies.Add(myHttpCookie);

        //This will clear the session cookie (not required for my application but applying to be safe)
        HttpCookie myHttpCookie2 = new HttpCookie("ASP.NET_SessionId", "");
        myHttpCookie2.Expires = DateTime.Now.AddYears(-1);
        Response.Cookies.Add(myHttpCookie2);

        FormsAuthentication.RedirectToLoginPage();
    }

这里是我调用事件的地方:

 <a href="Log_In.aspx"><span class="MenuItem" runat="server" onclick="LogOff_Click">Log Off</span></a>

请发布您的事件处理程序和相关标记。 - jrummell
您想引发Postback事件以便运行服务器端函数,是这样吗?这篇文章可能会对此有所帮助。 - Josh Darnell
好的,客户端上的 onclick 仍然会执行 JavaScript(无论是内联还是函数调用)。 - David Hoerster
5个回答

10

你的LogOff_Click没问题。 然而,你需要修改你的标记。 将onserverclick事件应用于<a>标签而不是<span>。 在你的情况下,尝试如下:

 <a href="Log_In.aspx" runat="server" onserverclick="LogOff_Click"><span class="MenuItem">Log Off</span></a>

7

描述

div元素支持javascript事件onclick,所以你可以这样做。 你可以通过查看w3c shools标签定义来检查html元素是否支持给定的事件。

我不确定你具体指的是什么。您可以在客户端使用javascript做很多事情。onclick是javascript,但您还可以使用服务器端(Postback on ASP.NET Webforms)进行重定向等操作。除了执行ajax之外,在没有执行ajax的情况下使用javascript的操作是不会被服务器察觉的,因为javascript由浏览器处理。

查看我的示例和这个jsFiddle演示

<div>标记的示例

Html代码

<div onclick="alert('hello');">hello world</div>

更多信息


谢谢!糟糕,我已经达到了每天200点的限制,但我喜欢帮助别人。即使我不能通过投票获得更多积分。 - dknaack
@DavidHoerster 又晚了一分钟 ;) 没问题。无论如何,谢谢您。 - dknaack
谢谢你分享w3c源代码,正是我想要的! - Enrico

2
如果您想继续使用ASP.NET,可以使用Panel控件并执行以下操作:

标记

<body>
    <form id="form1" runat="server">
    <div>
        <asp:Panel runat="server" ID="pan1">click here</asp:Panel>
    </div>
    </form>
</body>

代码后台

public partial class WebForm1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        pan1.Attributes.Add("onclick", "javascript:alert('here');return false;");
    }
}

你仍然在写JavaScript,但是你正在使用ASP.NET控件和ASP.NET的客户端事件设置方式。

我实际上更喜欢dknaack和Silvertiger的方法-将事件放在客户端代码中(最好是JavaScript文件而不是内联)。


1

标准的DOM和CSS可以实现这个功能

<div style="cursor:hand;" onclick="this.document.location.href ='http://www.google.com';">
    My content
</div>

应该可行


+1 - 更喜欢客户端处理方式而不是服务器端...另外,我不确定为什么你被踩了,所以我想把它平衡一下。 - David Hoerster
@David Hoerster,不需要太多常识就能意识到答案与问题毫无关联。干得好! - Lloyd
它为什么不相关呢?您不需要使用C或ASP来实现HTML DOM / JavaScript,以完成无需服务器端干预的功能。 - Silvertiger

0

不确定您的具体意图。当触发onclick事件时,需要通过Javascript调用处理程序来处理该事件。

您可以在JavaScript中执行表单提交,或者触发一个Ajax回调来与您的.NET应用程序交互。

回答原始问题,onclick事件可以通过<div>标记触发。请确保针对Internet Explorer 7/8(兼容模式)进行测试,因为并非所有事件都适用于IE 7/8。在Firefox、Chrome和IE9中应该没问题。将此保存在文件中并进行实验。

<html>
<head>
<script type="text/javascript">
function JSFn()
{
   //you can use the div ID if needed: var id = document.getElementById('div_id');
   alert("JSFn was called");
   //Can do form submit or Ajax callback to interact with .NET app

}
</script>
</head>
<body>
<div>
<a id="anchor1" href="javascript:JSFn();">Make a clickable link here, you can use onclick and href='#'  </a>
</div>

<div id="div_id2" onclick="JSFn()">Just click here </div>

</body>
</html>

为了进行表单提交,您需要将<div>包含在<form>标签中。 - Loser Coder

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接