javascript处理a标签超链接默认事件的方法

本文实例讲述了javascript处理a标签超链接默认事件的方法。分享给大家供大家参考。具体分析如下:

有时需要在a标签上添加click事件,并且跳转前处理一些事务,故需要做一些处理;通常前端会给出一个<a href="#">link</a>来代表这个行为,有些还会这样写<a href="###">link</a>或者<a href="javascript:void(0);">link</a>这样的写法,但这样并不兼容所有浏览器,有些浏览器就会出现很怪异的形为。

因此,这个问题需要其它方法来解决,其一是用jquery的阻止默认事件,就像JQUERY的官方API中所给出的示例:

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>event.preventDefault demo</title>
 <script src="jquery-1.10.2.js"></script>
</head>
<body>
<a href="http://jquery.com">default click action is prevented</a>
<div id="log"></div>
<script>
$( "a" ).click(function( event ) {
 event.preventDefault();
 $( "<div>" )
  .append( "default " + event.type + " prevented" )
  .appendTo( "#log" );
});
</script>
</body>
</html>

另一种方法是给超链加个javascript方法,方法里判断加return

代码如下:

<a href="a.html" onclick="javascript:proc();" >link</a>

希望本文所述对大家的javascript程序设计有所帮助。

时间: 2015-06-27

JavaScript常用标签和方法总结

什么是javascript?   (1) JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的 脚本语言. (2) JavaScript是由Netscape公司开发的一种脚本语言,其编写的程序可以嵌入到 HTML页面中,并直接在浏览器中解释执行. (3) JavaScript可以被浏览器直接解释执行,它可以更好得减小服务器压力,提高程 序运行效率. //事件(事件监听) : //标签对象.事件监听.function(){执行的代码,找对象,找属

JavaScript动态创建link标签到head里的方法

本文实例讲述了JavaScript动态创建link标签到head里的方法.分享给大家供大家参考.具体分析如下: 相信有很多做前端的朋友碰到过需要用 JavaScript 动态创建样式表标签--link标签.这里我们就来说说如何在浏览器中动态创建link标签. 使用 jQuery 创建 link 标签 如果你开发中喜欢用jQuery,那么用jQuery在创建link标签应该是这样的: 复制代码 代码如下: var cssURL = '/style.css',     linkTag = $('<l

js 为label标签和div标签赋值的方法

在html中,label是没有value属性的, 他与div以及其他大部分html元素一样,有innerText和innerHTML属性 不能document.getElementByID("test").value="chenhuang"; 应该是下面的 复制代码 代码如下: <labelid="test"></label>document.getElementById(test).innerText="&qu

js改变img标签的src属性在IE下没反应的解决方法

今天写项目时遇到个图片需要动态改变,例: <img src="images/image01.jpg" id="myImage" /> 然后改变时,使用js脚本: document.getElementById('checkCodeImage').src='images/image02.jpg'; 然后在Chrome FF里都能改变成功,但在IE下却不行,网上搜了半天,大概了解了,这个是IE的一个bug,要想改变src属性成功,可以这么写: documen

select标签模拟/美化方法采用JS外挂式插件

<select>标签的外观问题很恼人,各个浏览器都不一致,单单就IE,一个版本就一个长相,还不能用CSS修饰. 在这将本人对<select>的美化方法共享出来.优点: 仍保留使用<select>,仅改变外观,不改变不干预Form行为,后期加载JS.(注:本脚本依赖jQuery) 啥也不说了,都在代码里. 复制代码 代码如下: $(document).ready(function () { // 找出需要美化的<select>标记,我们用一个class名称 &

js使用html()或text()方法获取设置p标签的显示的值

html()方法 此方法类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个元素中的HTML内容.要获取某个元素的内容,可以这样: var p_html = $("p").html(); //获取p元素的HTML代码 如果需要设置某元素的HTML代码,那么也可以使用该方法,不过需要为它传递一个参数.例如要设置p元素的HTML代码,可以使用如下代码: //设置p元素的HTML代码 $("p").html("欢迎您访问简明现代魔法图书

JavaScript获得页面base标签中url的方法

本文实例讲述了JavaScript获得页面base标签中url的方法.分享给大家供大家参考.具体如下: 如果网页中定义了base标签,我们可以通过js代码获得base的url地址 <!DOCTYPE html> <html> <head> <base id="htmldom" href="http://www.jb51.net/"> </head> <body> <p>Base UR

Javascript中使用A标签获取当前目录的绝对路径方法

一谈到路径相关的问题,大家都会往window.location上想,确实这个对象提供了相当多的路径信息,其中常用的就包括: 1.location.href:当前页面的完整URL 2.location.pathname:当前URL中的路径名 3.location.hash:当前URL中的锚点 4.location.search:当前URL中的查询参数 然而,location没有一个属性能直接获得当前目录(不含文件名)的绝对路径.通过Google我发现了一些错误的方法,比如说把URL通过"/&quo

JavaScript中输出&lt;/script&gt;标签的方法

在JS里弹出'</script>'会让JS误以为这是一个结束标签,而出现异常. 如以下代码 我们在<script>块内使用alert弹出'</script>'字符串,结果被误以为是结束标签,VIM还变了颜色.运行结果 由于把字符串里的当成了结束标签,所以就出现异常,显然这不是我们想要的结果.我们只需要把代码稍加处理一下即可实现. 在'</script>'里使用加号链接字符串,'</scr'+'ipt>'再来看下运行结果 程序正常,正确弹出字符串'

使用js检测浏览器是否支持html5中的video标签的方法

复制代码 代码如下: //检测是否支持HTML5function checkVideo() {    if (!!document.createElement('video').canPlayType) {        var vidTest = document.createElement("video");        oggTest = vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');  

实现网页页面跳转的几种方法(meta标签、js实现、php实现)

1.meta标签实现 只需在head里加上下面这一句就行了,在当前页面停留0.1秒后跳转到目标页面 复制代码 代码如下: <meta http-equiv="refresh" content="0.1; url=http://jb51.net/"> 2.Javascript实现 方法一: 这个方法比较常用 复制代码 代码如下: window.location.href = "http://jb51.net/"; 方法二: 复制代码 代

js 通过html()及text()方法获取并设置p标签的显示值

html()方法 此方法类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个元素中的HTML内容.要获取某个元素的内容,可以这样: 复制代码 代码如下: var p_html = $("p").html(); //获取p元素的HTML代码 如果需要设置某元素的HTML代码,那么也可以使用该方法,不过需要为它传递一个参数.例如要设置p元素的HTML代码,可以使用如下代码: 复制代码 代码如下: //设置p元素的HTML代码 $("p").ht

使用text方法获取Html元素文本信息示例

获取文本信息的方法有很多,本例使用的使用的是jquery的text方法,这个方法想必大家都有使用过吧,简单实用.获取之后并使用alert将文本弹出,下面是实现代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> p { margin:8px;

Jquery和JS获取ul中li标签的实现方法

js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElementsByTagName("ul"); var itemss=items[2].getElementsByTagName("li");//获取第二个li标签 或 var div=document.getElementById('a'); var ul=div.childN

JS与jQuery实现子窗口获取父窗口元素值的方法

本文实例讲述了JS与jQuery实现子窗口获取父窗口元素值的方法.分享给大家供大家参考,具体如下: 功能描述:父窗口有一个input,和一个button ,点击button打开子窗口,在子窗口中获取父窗口中input的值,并显示. js: 父窗口: <input type="text" name="currentProjectIDForDetail" id="currentProjectIDForDetail" disabled="

JS实现兼容各种浏览器的获取选择文本的方法【测试可用】

本文实例讲述了JS实现兼容各种浏览器的获取选择文本的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" con

JS获取及设置TextArea或input文本框选择文本位置的方法

本文实例讲述了JS获取及设置TextArea或input文本框选择文本位置的方法.分享给大家供大家参考.具体实现方法如下: function getPos(el) { var range, textRange, duplicate el.focus() if ( el.selectionStart ) return el.selectionStart else if ( document.selection ) { // IE range = document.selection.createR

JS中位置与大小的获取方法

scrollHeight,clientHeight,offsetHeight的区别 说明: scrollHeight:DOM元素的实际内容的高度,不包border的高度,会随DOM元素中内容的增加(超过可视区后)而变大. clientHeight:DOM元素内容可视区的高度,不包含滚动条和边框的高度. offsetHeight:DOM元素整体的高度,包括滚动条和边框. 当滚动条不出现的时候 这时候DOM元素中没有内容或者内容不超过可视区 scrollWidth=clientWidth,两者皆为可

js实现不提交表单获取单选按钮值的方法

本文实例讲述了js实现不提交表单获取单选按钮值的方法.分享给大家供大家参考.具体如下: 这是JS实现的特效,不提交表单获取相关的控件值.如本例所示,不提交表单即可获取单选按钮的值. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-alert-show-table-value-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

JS获取下拉框显示值和判断单选按钮的方法

本文实例讲述了JS获取下拉框显示值和判断单选按钮的方法.分享给大家供大家参考.具体如下: 1.本人做过很多项目,都需要得到select组件显示的值.下面是我经常用到的方法: Html源码如下: <html><body> <select id="province" name="province" > <option value="1">北京</option> <option valu