创:9_3_2017 星期4
修:
对于在a标签中,如何阻止跳转?
定义一个事件,事件顺序执行后才执行跳转,如果事件函数返回false,则后面事件就不触发
事件1 = “return 函数();”
函数多出一句 return false;
这样可以做到前端验证
需求1,点击按钮一下,按钮变成新标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嘻嘻</title> </head>
<body>
<div >
<a href="http://www.baidu.com" id="a" onclick="return Create_b();">创建标签</a>
</div>
<script>
function Create_b() {
// 获得标签
var nid =document.getElementById('a');
// 新标签字符串
var new_b = '<input type="text">';
// 替换获得标签
nid.innerHTML = new_b;
// 事件成功后不执行下一个事件
return false; }
</script>
</body>
</html>
需求2,点击新建标签按钮,从最前面添加标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嘻嘻</title> </head>
<body>
<div> <a href="http://www.baidu.com" id="a" onclick="return Create_b1();">创建标签</a> </div> <script>
function Create_b1() {
// 定义新建标签
var new_b = '<input type="text">';
// 每次在最前面新建标签
a.insertAdjacentHTML("beforeBegin",new_b);
return false;
}
</script>
</body>
</html>
需求3,前面两者太low了,有个高级的方法么?
有,通过创建对象添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嘻嘻</title> </head>
<body>
<div > <a href="http://www.baidu.com" id="a" onclick="return Create_b();">创建标签</a> </div>
<script>
function Create_b() {
// 创建input标签对象
var new_b = document.createElement('input');
// 定义type属性
new_b.type='text';
// 定义value属性
new_b.value = 'hehehe';
// 找到标签
var nid = document.getElementById('a');
// 在找到标签后面添加,同一级
nid.appendChild(new_b); return false; }
</script>
</body>
</html>