原生js、jq移入移出事件

最新推荐文章于 2023-06-15 17:03:12 发布
最新推荐文章于 2023-06-15 17:03:12 发布
阅读量2.4k 收藏 2
点赞数 1
分类专栏： js 移入移出事件 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43659178/article/details/107939352
版权
本文探讨了原生JavaScript中的移入移出事件，包括冒泡和非冒泡两种情况，并提及jQuery中如何实现相同功能。jQuery提供hover方法，实际上基于mouseenter和mouseleave，使用时需要注意冒泡行为。
摘要由CSDN通过智能技术生成

在原生js上移入移出共有两种
一种是冒泡的
鼠标移入或移出被选元素及其所有子元素就会触发

element.onmouseover = function(){
   
	alert("移入");
}
element.onmouseout = function(){
   
	alert("移出");
}

一种是不冒泡的
鼠标移入或移出被选元素才会触发


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  榴莲尖尖
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
移动端touch-zepto事件

				
			

			

				

					L990614的博客
				

				

					10-20
					
					648
					
				

			

		

		

			
				
移动端事件
1. 原生移动端touch事件

1.1. 手指放到屏幕上的时候触发 touchstart    开始触摸

	<body>
    <div id="mm">看这里~~~</div>

    <script>
        var mm = document.getElementById("mm");
        mm.ontouchstart = function(){
            mm.innerHTML = "手指放到屏

			
		

	



                

              
                



	

		

			

				
					
js 实现 鼠标移入移出时颜色变化

				
			

			

				

					03-31
				

			

		

		

			
				
js 实现 鼠标移入移出时颜色变化!
值得下载看看!资源免费,大家分享!!

			
		

	



                


  
              

                


	

		

			

				
					
原生JS鼠标移入移出事件

				
			

			

				

					weixin_44543312的博客
				

				

					02-15
					
					7764
					
				

			

		

		

			
				
开发工具与关键技术：DW  JavaScript
作者：梁茵茵
撰写时间：2019年2月15日

在css中可以用伪类hover来实现鼠标的移入移出效果，而在JS中也可以用鼠标移入onmouseover事件和鼠标移出onmouseout事件来实现。当然，两者肯定有区别的。下面我只介绍用JS来写的方法，html的结构布局和css的样式代码如下：

@charset "utf-8";
/* CSS D...

			
		

	





	

		

			

				
					
js移入和移出

				
			

			

				

					德川家康
				

				

					12-07
					
					925
					
				

			

		

		

			
				
js移出和移入
&lt;DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
     &lt;meta charset="UTF-8"&gt;
     &lt;meta http-equiv="X-UA-COMPATIBLE" content="IE=edge" &gt;
     &amp

			
		

	



		

			
		



	

		

			

				
					
利用css3和js原生实现鼠标移入移出模块透明度的变化

				
			

			

				

					xushiwei
				

				

					06-08
					
					1729
					
				

			

		

		

			
				
html布局   
对应的css样式  .main{width: 200px;height: 200px;background: red;
                       margin: 45px auto;opacity: 0.3;transition: opacity 0.5s ease-in;}
一：利用css3实现该效果
.mai:hover{opacity: 1;}

			
		

	





	

		

			

				
					
鼠标的移入、移出事件

					
最新发布

				
			

			

				

					
				

				

					06-15
					
					1万+
					
				

			

		

		

			
				
① 只要鼠标指针移入（或移出）事件所绑定的元素或其子元素，都会触发mouseover（或mouseout）事件② 只有鼠标指针移入（或移出）事件所绑定的元素时，才会触发mouseenter（或mouseleave）事件。

			
		

	





	

		

			

				
					
js 绑定键盘鼠标事件示例代码

				
			

			

				

					10-26
				

			

		

		

			
				
鼠标事件跟键盘事件类似，包括鼠标点击、鼠标移入、鼠标移出、鼠标按下、鼠标释放等等。鼠标事件对于网页中的动态效果和用户交互的实现非常关键，例如：  ```javascript // 绑定鼠标点击事件 document....

			
		

	





	

		

			

				
					
css+js+jq实训笔记

				
			

			

				

					weixin_42757570的博客
				

				

					07-02
					
					1375
					
				

			

		

		

			
				
css+js+jq实训笔记css第一天css第二天css第三天css第四天css第五天css第六天js第一天js第二天js第三天js第四天js第五天js第六天jq第一天jq第二天jq第三天
css第一天
1、平时有空多记单词（很多新单词）
2、用谷歌浏览器调试代码
3、多看看公众号和网站（对面试有很大的帮助，也可以帮助了解前端）
4、爱果果（可以去玩一下）
5、egret白鹭科技（游戏开发）
6、小程序API，要学会读懂文档、手册
7、学习PS
8、提高自己的审美
9、计算机网络、数据结构 考研408
10

			
		

	





	

		

			

				
					
jq动画  类  事件

				
			

			

				

					冠日的个人博客
				

				

					09-14
					
					266
					
				

			

		

		

			
				
拖拽的三个事件：

ondragstart拖拽开始

ondrag拖拽中

ondragend拖拽结束



//拖拽开始事件

box.ondragstart=function(){



console.log('st...

			
		

	





	

		

			

				
					
JavaScript鼠标移动事件及案例

				
			

			

				

					weixin_67224308的博客
				

				

					10-17
					
					1万+
					
				

			

		

		

			
				
于onmouseover相同但mouseenter事件只执行一次。鼠标移动都某个指点的HTML标签上时触发的事件。鼠标从HTML标签上移开时触发的事件。alert("按钮被点击")//被点击两次后弹出弹出框。alert("按钮被点击")//被点击后弹出弹出框。//找到按钮并设置双击击事件。//找到按钮并设置点击事件。鼠标双击时事件处理函数。

			
		

	





	

		

			

				
					
js两种移除事件的方法

				
			

			

				

					Smallwhitestrive的博客
				

				

					10-08
					
					8198
					
				

			

		

		

			
				
在js的学习中，为元素添加事件是非常常见的
那么，下面我带大家了解一下js中移除事件的两种方法
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="点我啊" id="fst" />
		<input type

			
		

	





	

		

			

				
					
js 多个事件的绑定及移除(包括原生写法和 jquery 写法)

				
			

			

				

					weixin_33795833的博客
				

				

					03-20
					
					247
					
				

			

		

		

			
				
需要打开控制台查看效果：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js 多个事件的绑定及移除</title>
</head>
<body>


<...

			
		

	





	

		

			

				
					
解决原生JS鼠标移入事件多次触发的问题

				
			

			

				

					heartToSky的博客
				

				

					02-18
					
					3081
					
				

			

		

		

			
				
在原生JS的onmouseover事件中，一般使用的期望是在鼠标移入的时候触发一次，但是当绑定事件的元素有子元素时候，鼠标在元素和子元素中切换时候会多次触发鼠标移入事件，但是不会触发鼠标移出事件，基于上述特性，可以在事件触发的处理函数前加个判断
content_list.addEventListener('mouseover',function(){
        if(!this.flag){
            this.flag=true
            this.className=t

			
		

	





	

		

			

				
					
鼠标移入移出事件

				
			

			

				

					weixin_57764808的博客
				

				

					08-18
					
					1万+
					
				

			

		

		

			
				
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

下面就是我用onmouseover 和 onmouseout 做出来的小案例，如下图：



当你把鼠标移入到选项卡上面，对应的选项卡就会变为黄色，下面的图片区域也会改变，会跳出来对应的图片，当年从选项卡里移出来，选项卡就会变为默认的颜色，图片保留在页面

首先获取到选项卡和图片的数据，如下图所示：



然后用for循环把每一个li标签获取到，



如果要实现图片切换，那么必须先把之

			
		

	





	

		

			

				
					
js中常用的事件，onclick 单击事件、onblur 失去焦点事件、onchange改变事件、onmouseover鼠标进入事件、onmouseout鼠标移除事件、onsubmit提交事件

					
热门推荐

				
			

			

				

					ghjzzhg的博客
				

				

					01-16
					
					7万+
					
				

			

		

		

			
				
onclick 单击事件
onblur 失去焦点事件
onchange 当对象或选中区的内容改变时触发。
onmouseover 当用户将鼠标指针移动到对象内时触发。
onmouseout 当用户将鼠标指针移出对象边界时触发。
onsubmit 当表单将要被提交时触发。


1、静态点击事件

script type="text/javascript">
// A标签的点击事

			
		

	





	

		

			

				
					
JS：鼠标移入移出事件监听

				
			

			

				

					燕双嘤
				

				

					09-05
					
					1万+
					
				

			

		

		

			
				

&lt;!DOCTYPE html&gt;
&lt;html lang="en" dir="ltr"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;鼠标移入移出显示效果&lt;/title&gt;
    &lt;style&gt;
    #d

			
		

	





	

		

			

				
					
input js 离开事件_onBlur事件与onfocus事件（js） （光标到达和离开是触发事件）...

				
			

			

				

					weixin_42449548的博客
				

				

					02-01
					
					1万+
					
				

			

		

		

			
				
[1、回车键触发事件的js代码 在文本框中输入完内容后,经常需要按回车,焦点跳到下个文本框,或者触发按钮事件判断是否按下的为回车非常简单:function EnterPress(){   ionFocus事件就是当光标落在文本框中时发生的事件。onBlur事件是光标失去焦点时发生的事件。可以编如下例子1.html使用onBlur事件处理程序[以前看到alibaba上的注册右边的提示信息效...

			
		

	





	

		

			

				
					
vue3 鼠标移入时,一直触发移出事件

				
			

			

				

					05-01
				

			

		

		

			
				
在Vue3中，如果鼠标移入时触发了移出事件，有可能是由于绑定的事件处理函数出现了问题。常见的问题包括但不限于：

1. 绑定的事件处理函数存在死循环或递归调用，导致事件一直触发；
2. 绑定的事件处理函数内部出现了错误，导致事件无法正常触发；
3. 绑定的事件处理函数没有正确地清除或解绑，导致事件重复触发。

针对这些问题，我们可以采取如下的解决方法：

1. 检查绑定的事件处理函数，确保其不存在死循环或递归调用；
2. 通过调试工具查看绑定的事件处理函数是否存在错误，并进行修复；
3. 在组件的生命周期函数中正确地清除或解绑事件。

除此之外，还可以考虑在Vue3中使用修饰符来对事件进行处理。例如，在鼠标移入时，我们可以使用.native修饰符来绑定原生事件，从而避免事件被Vue框架拦截或干扰。

总之，解决Vue3中鼠标移入一直触发移出事件的问题，需要仔细分析具体情况，找出问题所在，并采取合适的解决方法。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值