首页 新闻 会员 周边

JavaScript如何阻止<a>标签的默认行为?

0
悬赏园豆:20 [已解决问题] 解决于 2016-05-05 10:11

照着《JavaScript DOM编程艺术》第六章 做个图片库,在点击链接的时候要留在本窗口不新开一个窗口,而我做出来的每次点击图片列表都会打开新窗口,而且占位符图片的文本也没有替换为所点击的图片的title属性值,请问哪里出了问题?

图片替换

my image

Choose an image.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="layout.css">
<script type="text/javascript">
window.onload=function prepareGallery(){
var gallery=document.getElementById('imagegallery');
var links=gallery.getElementByTagName('a');
var i = 0;
for(i = 0;i<links.length;i++){
links[i].onclick=function(){
return showPic(this)?false:true;
};
};
};

function showPic(whichpic){

var source=whichpic.getAttribute('href');

var placeholder=document.getElementById('placeholder');
placeholder.setAttribute('src',source);

var text=whichpic.getAttribute('title')?whichpic.getAttribute:"";
var description=document.getElementById('description');
description.firstChild.nodeValue = text;
return true;
};

</script>
</head>
<body>
<h1>图片替换</h1>
<ul id='imagegallery'>
<li>
<a href="http://g.hiphotos.baidu.com/zhidao/pic/item/9f510fb30f2442a79fbc68ded343ad4bd113021e.jpg" title="A Fire man">Fire</a>
</li>
<li>
<a href="http://attach.bbs.miui.com/forum/201402/21/120043wsfuzzuefyasz3fe.jpg" title="A cup of coffee" >Coffee</a>
</li>
<li>
<a href="http://h.hiphotos.baidu.com/zhidao/pic/item/6a63f6246b600c3320b14bb3184c510fd8f9a185.jpg" title="A red rose" >Rose</a>
</li>
<li>
<a href="http://pic2.nipic.com/20090506/1055421_080356081_2.jpg" title="A strong man" >Strong</a>
</li>
</ul>
<img src="http://imgsrc.baidu.com/forum/pic/item/9f510fb30f2442a72c033b31d143ad4bd1130211.jpg" id="placeholder" alt="my image">
<p id="description">Choose an image.</p>
</body>
</html>

Atlas_s的主页 Atlas_s | 初学一级 | 园豆:184
提问于:2016-04-21 14:00
< >
分享
最佳答案
1

<a href target title />

这里面有个target属性,target="_self"表示当前页面打开, _blank表示新页面打开,你把target属性设置一下

收获园豆:15
waiter | 小虾三级 |园豆:1000 | 2016-04-21 14:04

还是新窗口打开。

还有我是希望通过javascript代码实现这个效果。

之前把onclick="showPic(this);return false;"当作一个属性插入到<a>标签中可以实现在本窗口打开。

现在是把onclick事件写入JavaScript中并通过判断返回值true||false来决定是否取消<a>的默认行为,然而并没有用。

Atlas_s | 园豆:184 (初学一级) | 2016-04-21 14:13

function tt(){

  return false;

}

 <a href="http://pic2.nipic.com/20090506/1055421_080356081_2.jpg" onclick="tt();" title="A strong man">Strong</a>

 <a href="http://pic2.nipic.com/20090506/1055421_080356081_2.jpg" onclick="return tt();" title="A strong man">Strong</a>

你研究下这两个的区别,和你的onclick的关系。

waiter | 园豆:1000 (小虾三级) | 2016-04-21 14:55
其他回答(2)
0

很简单的,这是javascript基础,阻止默认事件就好了

e是当前事件的事件源

e.preventDefault();

 

另外给你一个地址,你也可以自己封装一个

http://www.cnblogs.com/goesby/p/4192018.html 

收获园豆:5
徐大腿 | 园豆:420 (菜鸟二级) | 2016-04-21 17:13
0

阻止a的默认行为:<a href="https://www.hao123.com" onClick="return false;">链接</a>

点击a后不会有任何变化

少爷zwx | 园豆:159 (初学一级) | 2016-05-16 14:59
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册