vue.js 事件对象

贵哥的编程之路

发布于 2021-03-02 15:44:14

2.6K0

发布于 2021-03-02 15:44:14

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script type="text/javascript" src='vue.min.js'></script>
	<style type="text/css">
		body,html{width: 100%;height: 100%;}
	</style>
</head>
<body @click="changed(10,$event)">
	<script type="text/javascript">
		new Vue({
			el:'body',
			methods:{
				changed:function(event,l)
				{
					console.log(event,l);
				}
			}
		});
	</script>
</body>
</html>

解释：

$event是事件对象.

效果：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script type="text/javascript" src='vue.min.js'></script>
	<style type="text/css">
		body,html{width: 100%;height: 100%;}
		div{width: 100px;height: 100px;background: black;}
	</style>
</head>
<body @click="bodyEvent">
	<div @click.stop='divEvent'></div>
	<script type="text/javascript">
		new Vue(
			{
				el:'body',
				methods:{
					bodyEvent:function()
					{
						alert("body");
					},
					divEvent:function(event)
					{
						//event.cancelBubble=true;
						//event.stopPropagation();
						alert("div");
					}
				}
			}
		);
	</script>
</body>
</html>

解释：

与

一样的效果，都是事件冒泡. 效果：

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <script type="text/javascript" src='vue.min.js'></script>
    <style type="text/css">
    	body,html{width: 100%;height: 100%;}
    	
    </style>
</head>
<body @contextmenu.prevent='bodyEvent'>
	
<script type="text/javascript">
	new Vue({
		el:'body',
		methods:{
			bodyEvent:function(){
				//event.preventDefault();
				alert('我右键了！');
			}
		}
	})
</script>
</body>
</html>