Vue 2_4.vue的v-on鼠标移动事件和阻止事件传播

最新推荐文章于 2024-08-06 09:25:20 发布

杰克L

最新推荐文章于 2024-08-06 09:25:20 发布

阅读量1.7k

点赞数

分类专栏： Vue 文章标签： vue js javascript jquery css

本文链接：https://blog.csdn.net/weixin_46503633/article/details/117393762

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文通过一个具体的代码示例，详细解释了Vue中使用v-on:mouseover事件绑定以及如何处理事件传播问题。当鼠标移动到textarea上时，原本会触发外层div的mouseover事件，通过event.stopPropagation()可以阻止事件冒泡，确保只执行textarea对应的事件处理函数。

摘要由CSDN通过智能技术生成

鼠标移动事件的关键字是v-on:mouseover，
例: v-on:mouseover=“divmouseover()”
接下来看下具体代码的编写：
在body中编写以下代码：

<body>
	<div id="jieke">
		<div id="div" v-on:mouseover="divmouseover()">
			<textarea  v-on:mouseover="textareamouseover()">这是一个文件域</textarea>
		</div>
	</div>
</body>

在js中添加以下代码：

<script type="text/jscript">
	new Vue({
		el: "#jieke",
		methods:{
			divmouseover:function(){
				alert("鼠标移动到div上了");
			},
			textareamouseover:function(){
				alert("鼠标移动到textarea上了");
			}
		}
	}); 
</script>

在style中给div设置样式：

<style>
	#div{
		background-color: blue;
		width: 300px;
		height: 300px;
	}
</style>

对代码的说明：
在这里插入图片描述
运行效果：
(当鼠标移动到div上之后)

当鼠标移动到textarea上

此时我们发现当鼠标移动到textarea上之后不仅弹出了textareamouseover函数中的信息，在点击确定之后又弹出了divmouseover函数中的信息，这是因为我们的文件域也是属于div的，所以需要阻止事件的传播
此时需要在我们的textareamouseover函数中添加一行