`
dubadiyu
  • 浏览: 18260 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

(转)给超链接加onclick事件

    博客分类:
  • html
 
阅读更多

在动态网页中,常常需要在单击超链接时处理一些数据,而不是跳转一个网页。在这种情况下,通常有以下三种处理方式:

不设置<a>标签的href属性,只设置onclick属性。在这种处理方式下,通常超链接文本会和正文的文本以相同的形式出现,即不 会有默认的下划线。当鼠标放在超链接上也不会显示小手的形状(除非为该超链接设置了CSS)。因此,用户很难知道这是一个可以点击的超链接。

将<a>标签的href属性值设置为"#",并设置onclick属性。在这种处理方式下,用户可以很明显地看出哪些文字是超链接。在 单击该超链接时,也可以执行onclick属性值中的JavaScript语句,并且不会跳转网页。但是,由于href的属性值为"#",浏览器会自动跳 转到当前网页的顶部。如果当前网页内容比较多,浏览器窗口出现下拉滚动条时,可以很明显地看到跳转,而这种跳转往往不是网页设计者的          本意。

在没有为<a>标签设置onclick属性时,如果单击了该超链接,浏览器会加载href属性中的URL。如果href属性值并不是一 个URL,而是一个JavaScript语句的话,那么浏览器就会执行该语句。因此,可以直接将JavaScript语句写在<a>标签的 href属性值中,让href属性代替onclick属性。在这种处理方式下,既可以响应click事件,又可以不让网页跳转。

在<a>标签的href属性值中添加JavaScript语句之前,必须要先使用"javascript:"语句来声明href属性值 中的语句为JavaScript语句。否则,浏览器会将href属性值中的JavaScript语句当成是URL进行加载。请看代码清单12-11,注意 加粗的文字。

代码清单12-11  在超链接中使用事件

<html>
<head>
<title>在超链接中使用事件</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script type="text/javascript" language="javascript">
<!--
//多添加几个换行,让效果明显
for (var i=0;i<100;i++)
{
document.write("<br>");
}
-->
</script>
</head>
<body>
<a onclick="alert('您单击了第二个超链接')">第1个超链接</a><br>
<a href="#" onclick="alert('您单击了第二个超链接')">第2个超链接</a>
<br>
<a href="javascript:alert('您单击了第三个超链接')">第3个超链接</a>
<br>
</body>
</html>

 

 
图12-11  sample11.htm的
运行结果

在本例中创建了3个超链接,这3个超链接的处理方式如下所示:

第1个超链接中,没有设置href属性,因此,从图12-11中看起来好像只是一行文字,并且鼠标放在上面的时候,也不会显示小手的形状。因此,很 难让用户知道这是一个可以点击的超链接。但是如果用户单击了该超链接,会弹出一个警告框,而且单击警告框中的【确定】按钮之后,不会跳转到任何URL上。

第2个超链接中,href属性值为"#",如果单击该超链接,先会执行onclick属性值中的JavaScript,弹出一个警告框。在单击警告框中的【确定】按钮之后,浏览器会自动跳转到当前网页的顶部。

第3个超链接中,直接将JavaScript语句写在href属性值中。在单击该超链接时,可以执行href属性值中的JavaScript语句,而且不会有任何跳转。

读者可以自己运行该文件查看效果。

原文链接:http://www.cnblogs.com/mingforyou/archive/2011/10/10/2206671.html

分享到:
评论

相关推荐

    Android开发之部分字符串可实现超链接点击事件的方法源码

    在上面的代码中,我们创建了一个ClickSpan对象,覆盖了onClick方法,当用户点击超链接时会启动一个浏览器Activity打开链接。然后通过indexOf方法找到超链接在字符串中的位置,使用setSpan方法将ClickSpan应用到指定...

    [removed].href = [removed].href 跳转无反应 a超链接onclick事件写法

    这样,当用户点击超链接时,浏览器不会尝试执行任何URL操作,而是执行`onclick`事件绑定的JavaScript函数。例如: ```html (0)" id="send" onclick="buttonClick();"&gt;发送 ``` 这种写法适用于所有现代浏览器,...

    给html超链接设置事件不使用href来完成跳

    当你在`&lt;a&gt;`标签中使用`href="#"`并添加`onClick`事件时,浏览器会先执行`onClick`中的JavaScript函数`fun()`,然后继续尝试执行`href`的默认行为,即跳转到页面顶部的锚点。这可能导致一些意外的效果,如改变页面...

    给超链接自定义一个右键菜单

    ### 给超链接自定义一个右键菜单 在网页开发中,给超链接自定义一个右键菜单是一项非常实用的功能,它可以为用户提供更多的交互选项,提高用户体验。本篇将详细介绍如何利用HTML、CSS以及JavaScript来实现这一功能...

    详解a标签添加onclick事件的几种方式

    在这种情况下,我们可以使用`onclick`事件来实现。本文将详细介绍在`&lt;a&gt;`标签上添加`onclick`事件的几种常见方法。 ### 方法1: 使用`javascript:js_method()` ```html ();" rel="external nofollow"&gt;点击我 ``` 这...

    html超链接a标签的href跳转跟onclick之间执行顺序示例介绍

    如描述中所述,`onclick`事件和`href`跳转之间的执行顺序是这样的:首先,`onclick`事件的JavaScript代码会被执行。如果`onclick`函数返回`false`,则浏览器将阻止默认的`href`跳转行为,即不会导航到`href`属性指定...

    点击超链接弹出一个信息框

    标题“点击超链接弹出一个信息框”涉及的是网页交互中的常见功能,即通过超链接触发JavaScript事件,显示一个信息提示框。在这个场景下,我们通常会使用HTML结合JavaScript来实现这一功能。以下是对这个主题的详细...

    TextView上超链接可以点击.zip

    在许多应用中,我们可能需要在TextView中展示带有超链接的文本,比如帮助文档、用户协议等。`TextView`默认并不支持直接点击超链接,但通过一些技巧,我们可以实现这个功能。本示例"TextView上超链接可以点击.zip...

    为FLASH添加超链接

    4. **嵌入代码调整**:如果SWF是通过HTML页面嵌入的,你还可以在HTML的`&lt;object&gt;`或`&lt;embed&gt;`标签中添加`onclick`事件,实现链接跳转,但这只适用于用户点击Flash本身,而不是Flash内部的元素。 在处理这类问题时,...

    js 外观类似按钮的超链接

    这可以通过`addEventListener`方法实现,为每个超链接添加`onclick`事件处理函数: ```javascript document.querySelectorAll('.link-button').forEach(link =&gt; { link.addEventListener('click', function(event)...

    HTML 按钮超链接

    例如,给按钮添加背景色和边框: ```css button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; ...

    TextView超链接自定义样式

    public void onClick(View widget) { // 跳转或执行操作的代码 } @Override public void updateDrawState(TextPaint ds) { super.updateDrawState(ds); ds.setColor(Color.parseColor("#FF0000")); // 设置...

    Android无下划线text超链接

    "Android无下划线text超链接"这个主题主要涉及如何在不显示下划线的情况下创建具有点击事件的文本链接,同时保持代码的可扩展性和灵活性。 传统的实现方式是在XML布局文件中使用`android:autoLink="web"`属性或者`...

    点击一个超链接弹出一个对话框

    例如,在React中,你可以创建一个`Modal`组件,通过状态控制其显示和隐藏,并在超链接的`onClick`事件中更新状态。 总的来说,实现“点击一个超链接弹出一个对话框”的功能,主要涉及JavaScript的事件处理、DOM操作...

    Unity3D教程:利用NGUI制作超链接2

    完成以上步骤后,你需要为包含这两个Label的游戏物体添加一个OnClick事件,这样当用户点击这个“超链接”时,可以触发相应的回调函数,执行你定义的逻辑,比如打开一个新的URL或执行游戏内的操作。 总的来说,通过...

    让网页上的超链接失效,不能点击的js代码

    这个代码使用了CSS选择器来选择所有的超链接,然后使用JavaScript的onclick事件来阻止超链接的点击事件。 首先,我们需要在HTML文件的头部添加以下代码:&lt;meta http-equiv="Content-Language" content="zh-cn"&gt; 让...

    Android 使用SpannableString在TextView中插入表情、超链接、文字变大、加粗Demo下载

    在Android开发中,文本展示是常见的需求之一,而TextView作为主要的文本展示控件,有时候我们需要在其中实现更丰富的展示效果,比如插入表情、添加超链接、改变文字大小和加粗等。本教程将深入讲解如何利用...

    delphi超链接

    同时,需要处理OnMouseEnter、OnMouseLeave和OnClick事件,提供鼠标悬停效果和点击行为。 4. **使用第三方库** Delphi社区提供了许多第三方库,如Synopse MORMOT框架中的TSynHyperLink控件,它们提供了更丰富的...

    C++实现WebBrowser控件中获取鼠标点击事件和超链接

    然后,我们重定义`IDispatch::Invoke()`方法,处理`onclick`事件,获取超链接: ```cpp STDMETHODIMP CMyView::Invoke(DISPID dispIdMember, REFIID riid, LCID lcid, WORD wFlags, DISPPARAMS* pDispParams, ...

Global site tag (gtag.js) - Google Analytics