您的位置：首页 > Web前端 > HTML

return false防止默认的事件行为

2017-05-03 20:56 127 查看

问题现象

点击对应的文字链接，图片最终不会在图片区显示照片，而是最终页面发生跳转，导致屏幕单独显示图片；

点击前:

点击后:

解决办法

在点击事件执行完后，返回return false，取消浏览器对超链接默认的事件行为；

关键代码如下：

<a href="img/海南.jpg" alt="这里是海南" onclick="return ShowPicture(this)">
在ShowPicture()函数中返回fals
</a>

或者

<a href="img/海南.jpg" alt="这里是海南" onclick="ShowPicture(this); return false">
海南
</a>

源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>
</title>
<link rel="stylesheet" href=""/>
</head>
<body>
<h1>
<i>美好风光</i>
</h1>
<ul>
<li>
<a href="img/海南.jpg" alt="这里是海南" onclick="return ShowPicture(this)">
海南
</a>
</li>
<li>
<a href="img/桂林.jpg" alt="这里是桂林" onclick="return ShowPicture(this)">
桂林
</a>
</li>
<li>
<a href="img/宏村.jpg" alt="这里是宏村" onclick="return ShowPicture(this)">
宏村
</a>
</li>
<li>
<a href="img/九寨沟.jpg" alt="这里是九寨沟" onclick="return ShowPicture(this)">
九寨沟
</a>
</li>
</ul>
<img id="placeholder" src="img/九寨沟.jpg" alt="这里是九寨沟" width="500px" height="400px"/>
<p id = "PictrueDescripte">这里是九寨沟</p>
<script>

function ShowPicture(whichpic){

var attrValue   = whichpic.getAttributeNode("href").value;
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",attrValue);

var attrDescription   = whichpic.getAttributeNode("alt").value;
var Description       = document.getElementById("PictrueDescripte");
Description.innerHTML = attrDescription;

return false;
}

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： a标签 false 取消默认行为 href html

相关文章推荐

新的分享

章节导航