解决了一个小疑点,希望对大家有帮助
解决了一个小问题,希望对大家有帮助
我们经常会用链接<a> 来代替 <button> 触发onclick事件。
比如<a href="javascript: alert()">测试</a>
这样做出现的结果就是: 执行了alert()后,直接跳到了一个空页面.因为html本身对 <a>标签的href属性做了处理,所以就会先执行我们自己定义的方法,接着再运行它自身的方法(跳转的方法)。
那么以前我是怎么做的呢? 我将代码改为<a href = "#" onclick="alert()">,这样就不会出现上述的问题了,这个是通过对href属性的了解,只要赋给href=“#”,那么它便不会跳到空页面。 我本以为这样的问题已经解决了,
想不到这种写法也有个问题,就是当页面出现垂直滚动条的时候,比如你的链接是在页面最底端,你需要将滚动条拉下才能看到此链接,你点击链接,就会先执行alert(),这个时候滚动条会自动拉上去到页面顶端,这给使用系统的客户造成了很大的不方便,由于页面自动往顶端跳,用户又要下拉滚动条来操作。这个说明执行了alert()方法后,浏览器自身也执行了自己的方法。
这样考虑之后,现在的做法是 <a href="" onclick = "alert();event.returnValue=false"/>,浏览器也是要响应这个事件,那么我们将这个事件停止传播了,自然也就没上面的问题了,当然event.returnValue只是IE的特有,如果要兼容firefox,mozilla ,可能需要考虑兼容性的编码了,但这不是表达的重点.
所以在平时的页面设计中,最好都是用button来响应onclick事件,如果有涉及到链接的,希望我这种做法能给大家带来帮助。
语言表达有限,如果觉得写得不太清楚的,请大家运行下面的例子,最后三个链接就是我刚刚讲的三种情况,此例子在IE6.0是通过的。
<BODY>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="javascript:alert()" >test</a> </p>
<p>
<a href="#" onclick="alert();event.returnValue=false;">test</a> </p>
</BODY>
你提到的伪协议有什么不好的地方? 现在我们项目中主要是用这种.
你提到的伪协议有什么不好的地方? 现在我们项目中主要是用这种.
在缺乏js支持的浏览器上,伪协议不可用
另外,对于习惯自己控制打开行为的用户(比如鼠标中键在新窗口中打开),这部分用户来困惑
一般也是这么做的。
我们经常会用链接<a> 来代替 <button> 触发onclick事件。
比如<a href="javascript: alert()">测试</a>
这样做出现的结果就是: 执行了alert()后,直接跳到了一个空页面.因为html本身对 <a>标签的href属性做了处理,所以就会先执行我们自己定义的方法,接着再运行它自身的方法(跳转的方法)。
那么以前我是怎么做的呢? 我将代码改为<a href = "#" onclick="alert()">,这样就不会出现上述的问题了,这个是通过对href属性的了解,只要赋给href=“#”,那么它便不会跳到空页面。 我本以为这样的问题已经解决了,
想不到这种写法也有个问题,就是当页面出现垂直滚动条的时候,比如你的链接是在页面最底端,你需要将滚动条拉下才能看到此链接,你点击链接,就会先执行alert(),这个时候滚动条会自动拉上去到页面顶端,这给使用系统的客户造成了很大的不方便,由于页面自动往顶端跳,用户又要下拉滚动条来操作。这个说明执行了alert()方法后,浏览器自身也执行了自己的方法。
这样考虑之后,现在的做法是 <a href="" onclick = "alert();event.returnValue=false"/>,浏览器也是要响应这个事件,那么我们将这个事件停止传播了,自然也就没上面的问题了,当然event.returnValue只是IE的特有,如果要兼容firefox,mozilla ,可能需要考虑兼容性的编码了,但这不是表达的重点.
所以在平时的页面设计中,最好都是用button来响应onclick事件,如果有涉及到链接的,希望我这种做法能给大家带来帮助。
语言表达有限,如果觉得写得不太清楚的,请大家运行下面的例子,最后三个链接就是我刚刚讲的三种情况,此例子在IE6.0是通过的。
<BODY>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="#" onclick="alert()">test</a> </p>
<p>
<a href="javascript:alert()" >test</a> </p>
<p>
<a href="#" onclick="alert();event.returnValue=false;">test</a> </p>
</BODY>
16 楼
sunarrow
2008-12-07
<a href="javascript:alert('test')">test</a>
是不会打开新窗口的,但是如果:
<a href="javascript:alert('test')" target="_blank">test</a>
就会打开新窗口了
是不会打开新窗口的,但是如果:
<a href="javascript:alert('test')" target="_blank">test</a>
就会打开新窗口了
17 楼
lifesinger
2008-12-07
<p>挺有意思,我的一些思考:<br/><a href='http://lifesinger.org/blog/?p=856'>http://lifesinger.org/blog/?p=856</a><br/></p>
<div class='quote_title'>fang9159 写道</div>
<div class='quote_div'>我们经常会用链接<a> 来代替 <button> 触发onclick事件。<br/>比如<a href="javascript: alert()">测试</a><br/>这样做出现的结果就是: 执行了alert()后,直接跳到了一个空页面.因为html本身对 <a>标签的href属性做了处理,所以就会先执行我们自己定义的方法,接着再运行它自身的方法(跳转的方法)。<br/>...<br/></div>
<p> </p>
<p> </p>
<div class='quote_title'>fang9159 写道</div>
<div class='quote_div'>我们经常会用链接<a> 来代替 <button> 触发onclick事件。<br/>比如<a href="javascript: alert()">测试</a><br/>这样做出现的结果就是: 执行了alert()后,直接跳到了一个空页面.因为html本身对 <a>标签的href属性做了处理,所以就会先执行我们自己定义的方法,接着再运行它自身的方法(跳转的方法)。<br/>...<br/></div>
<p> </p>
<p> </p>
18 楼
dch1287
2008-12-07
<span style="cursor:pointer" onclick="foo()">Click Me!</span>
19 楼
lobbychmd
2008-12-08
jQuery:
$('a').click(function(data){xxx; return false;});
或者 event.preventDefault() ,这个 好像 就是 浏览器 提供的方法嘛
$('a').click(function(data){xxx; return false;});
或者 event.preventDefault() ,这个 好像 就是 浏览器 提供的方法嘛
20 楼
vtsuper
2008-12-08
有些時候非用a不可...因為IE6只支援a:hover
21 楼
jsifa
2008-12-09
<a href="javascript:;" onclick="something()" >test</a>
22 楼
srdrm
2008-12-09
return false 比较好.
如果在 href 里加 javascript 在这样的情况下有问题:
浏览器是 ie6, ie7就没问题, IE6并且打开了个模态对话框(非模态的没试过), 对话框页面里有用到 <a href="javascript 这样形式的话, 点击就会弹出新窗口. 因此这样的情况是不能用的. 不过如果在 onclick里 return false 了 href 就不会执行啦. 因此建议使用 onclick 方式哦.再次声明, 此情况只是 ie6下
如果在 href 里加 javascript 在这样的情况下有问题:
浏览器是 ie6, ie7就没问题, IE6并且打开了个模态对话框(非模态的没试过), 对话框页面里有用到 <a href="javascript 这样形式的话, 点击就会弹出新窗口. 因此这样的情况是不能用的. 不过如果在 onclick里 return false 了 href 就不会执行啦. 因此建议使用 onclick 方式哦.再次声明, 此情况只是 ie6下
23 楼
我佛山人
2008-12-10
在href里写js绝对不是好主意
24 楼
rmn190
2008-12-10
笨笨狗 写道
囧,你就不能onclick="something();return false"啊……
javascript:void(0)这种伪协议,少写的好,如果你看过一些web标准的书就知道为什么了。
javascript:void(0)这种伪协议,少写的好,如果你看过一些web标准的书就知道为什么了。
你提到的伪协议有什么不好的地方? 现在我们项目中主要是用这种.
25 楼
maomao113
2008-12-10
<a href="javascript://onclick="something()" >test</a>也可以的嘛
26 楼
maomao113
2008-12-10
<a href="javascript://" onclick="something()" >test</a>也可以的嘛
27 楼
lifesinger
2008-12-11
rmn190 写道
笨笨狗 写道
囧,你就不能onclick="something();return false"啊……
javascript:void(0)这种伪协议,少写的好,如果你看过一些web标准的书就知道为什么了。
javascript:void(0)这种伪协议,少写的好,如果你看过一些web标准的书就知道为什么了。
你提到的伪协议有什么不好的地方? 现在我们项目中主要是用这种.
在缺乏js支持的浏览器上,伪协议不可用
另外,对于习惯自己控制打开行为的用户(比如鼠标中键在新窗口中打开),这部分用户来困惑
28 楼
ulliang
2008-12-12
也可以这么写<a href="#none" onclick="somefunction();"></a>
29 楼
saintlu
2008-12-17
这个很常见的问题,但是很多人还不知道。
30 楼
ShingU
2008-12-17
achun 写道
<a href="javascript:void(0)" onclick="something()" >test</a>
一般也是这么做的。
31 楼
wl7226089
2008-12-17
今天做到才发现
<a target="_parent" href="javascript:dosomething('11')">$city.name</a>这种最好
32 楼
walkman
2008-12-18
achun 写道
<a href="javascript:void(0)" onclick="something()" >test</a>
<a href="javascript:;" onclick="something()" >test</a>这才是王道呵呵
33 楼
xbmujfly
2008-12-19
用#的话,等于给页面给了新Hash,后退按钮可能失效,所以还是慎重一些呀!
34 楼
hanjs
2008-12-29
这个问题我也遇到过,有的时候点击一个超链接执行完代码后还会调整到一个空页面(如果有控件的页面),我都是用
<a href="javascript:" onclick="alert();">test</a>
来处理的
<a href="javascript:" onclick="alert();">test</a>
来处理的
35 楼
swain
2009-01-07
<a href="#@" onclick="doSomething()">test</a> 即可