shangrila-xiu

112
文章
101
分类
33
标签

阻止默认行为

现在说一说系统的默认行为

系统的默认行为在一定程度上影响我们的审美观，感觉怪怪的 有木有？

1、系统的默认行为是啥呢？先看下面的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>系统默认行为</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="box">
				<input type="button" value="按钮1" @contextmenu="show1($event)" />
				<input type="button" value="按钮" @contextmenu="show()" />
				 <p>按钮右击点下去会依次出现 弹窗 1， 还有右击的默认菜单</p>
        		<p>按钮1右击只出现 弹窗 2</p>
			
		</div>
		<script type="text/javascript">
			window.onload=function(){
				new Vue({
					el:'#box',
					data:{},
					methods:{
						show:function(ev){
							alert('你成功了');	
						},
						show1:function(event){
							alert('你失败了');
						}
					}
				});
			};
		</script>
	</body>
</html>

2、既然我们知道了系统的默认行为，当然默认行为除了这个，还有其他的，但是我们都可以使用下列的两个方法来阻止默认行为（在写代码之前，切记一定要引入vue.js）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>系统默认行为</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="box">
				<input type="button" value="按钮1" @contextmenu="show1($event)" />
				<!--下列这个是阻止默认行为的-->
				<input type="button" value="按钮" @contextmenu.prevent="show()" />
				 <p>按钮右击点下去会依次出现 弹窗 1， 还有右击的默认菜单</p>
        		<p>按钮1右击只出现 弹窗 2</p>
			
		</div>
		<script type="text/javascript">
			window.onload=function(){
				new Vue({
					el:'#box',
					data:{},
					methods:{
						show:function(ev){
							alert('你成功了');
						},
						//推荐使用
						show1:function(event){
							alert('你失败了');
							event.preventDefault();
						}
					}
				});
			};
		</script>
	</body>
</html>

event.preventDefault();阻止事件的默认行为。

@contextmenu.prevent=”show()”阻止事件的默认行为