onmouseover事件触发

中国机械与配件网2040

本篇文章给大家谈谈onmouseover事件触发,以及对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

鼠标的点击事件

body

    div class="one"/div

    script

        let one = document.querySelector('.one')

        // 点击事件

        one.onclick = function(){

            console.log('点击事件');

        }

        // 双击事件

        one.ondblclick = function(){

            console.log('双击事件');

        }

        // 鼠标右键点击事件

        one.oncontextmenu = function(){

            console.log('鼠标右键点击事件');

        }

        // 鼠标进入事件(onmouseenter比onmouseover先执行)

        one.onmouseenter = function(){

            console.log('鼠标进入事件');

        }

        // 鼠标离开事件(onmouseleave比onmouseout先执行)

        one.onmouseleave = function(){

            console.log('鼠标离开事件');

        }

         // 鼠标进入事件2

         one.onmouseover = function(){

            console.log('鼠标进入事件onmouseover');

        }

        // 鼠标离开事件2

        one.onmouseout = function(){

            console.log('鼠标离开事件onmouseout');

        }

        // 注意:如果元素里面存在子元素,鼠标在元素中移动时会反复触发 onmouseover 和 onmouseout

        // 鼠标移动事(所有的事件方法,都有一个默认的参数:事件对象)

        one.onmousemove = function(){

            console.log('渗段州鼠燃碧标正在移动');

        }

        // 鼠标按下事丛蔽件

        one.onmousedown = function(){

            console.log('鼠标按下');

        }

        // 鼠标弹起

        one.onmouseup = function(){

            console.log('鼠标弹起');

        }

    /script

/body

如何让OnMouseOver事件只触发一次

你可以在OnMouseOver 事件的方法里

把渣含尘事件清除就行老祥了

例:

a onmousemove="a()" id="dd"dddddddddddd/a

script type="text/javascript"

function a(){

var dd=document.getElementById("dd");

dd.style.fontSize='18px';

dd.onmousemove='';

}

/script如禅

手机端单击和鼠标经过触发什么事件

一、鼠标事件

onmousedown事件,当鼠标左键按下时触发。 如:当鼠标元素boxq1上按下时,改变它的背景颜色。

varbox1 = document.getElementById("box1"); box1.onmousedown=function(){ box1.style.backgroundColor= 'green'; };

2. onmouseup事件,当鼠标左键抬起时触发。如:鼠标按下之前元素box1背景颜色为红色,当按下之后变为绿色,放开之后又变为红色。

varbox1 = document.getElementById("box1"); box1.onmousedown=function(){ box1.style.backgroundColor= 'green'; }; box1.onmouseup=function(){ box1.style.backgroundColor= 'red'; };

3. onmousemove事件,当鼠标在元素上移动时触发。如:鼠标在元素box1上移动时,控制台输出鼠标的位置。

box1.onmousemove =function(e){varx =e.pageX;vary =e.pageY; console.log('鼠标横坐标为:'+x+'******鼠标纵坐标为:'+y); };

4. onmouseenter事件,当鼠标进入元素的瞬间触发,仅在鼠标进入元素时触发。如:鼠标在进入元素box1时,元素背景颜色改为绿色。

它与onmousedown事件区别在于:后者是再按下的瞬间触发,而前者是在进入元素瞬间才触发,也就是说鼠标在元素边界上才触发。搭凳

varbox1 = document.getElementById("box1"); box1.onmouseenter=function(){ box1.style.backgroundColor= 'green'; };

5. onmouseleave事件,当鼠标移出元素激旅的瞬间触发,仅在鼠标移出元素时触发,发生在元素边界。如:鼠标在进入元素box1时,背景颜色改为绿色,移出元素后又变为红色。

varbox1 = document.getElementById("box1"); box1.onmouseenter=function(){ box1.style.backgroundColor= 'green'; }; box1.onmouseleave=function(){ box1.style.backgroundColor= 'red'; };

6. onmouseover事件,当鼠标在元素之上的时候触发,只要鼠标留在元素之上就会触发,仅触发一次,不管鼠标是否移动,这是它和onmousemove的区别。如明枝凳:鼠标在元素box1上时一直在控制台输入数字一。

box1.onmouseover =function(){ console.log(newDate()); };

7. onmouseout事件,当鼠标离开目标元素是触发,效果和原理与mouseleave没有什么区别,只是在Firefox下没有onmouseenter和onmouseleave,只能使用onmouseover和onmouseout;而在IE中便可使用onmouseennter和onmouseleave来代替前两个。

二、手机触摸事件

1. ontouchstart事件,触摸开始事件,当手机屏幕被触摸的瞬间触发。如:当触摸手机的瞬间输出当前触摸的位置坐标。

varbox1 = document.getElementById("box1"); box1.ontouchstart=function(e){vartouch = e.touches[0];varx =Number(touch.clientX);vary =Number(touch.clientY); console.log("当前触摸点的横坐标"+x+"*****当前触摸点的纵坐标"+y); };

2. ontouchmove事件,触摸的整个过程触发,当手指在屏幕上移动的时候触发。如:当手指在屏幕上移动的时候获取当前触摸位置。

varbox1 = document.getElementById("box1"); box1.ontouchmove=function(e){vartouch = e.touches[0];varx =Number(touch.clientX);vary =Number(touch.clientY); console.log("当前触摸点的横坐标"+x+"*****当前触摸点的纵坐标"+y); };

3. ontouchend事件,触摸结束的瞬间触发,即当手指离开屏幕时触发。如:当手指离开屏幕时,改变元素的背景颜色。

varbox1 = document.getElementById("box1"); box1.ontouchstart=function(e){vartouch = e.touches[0]; box1.style.backgroundColor= 'green'; };

4. ontouchcancel事件,触摸过程被系统取消时触发,当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。

JS里面这个onmouseover起到什么作用

这搏庆岁基睁个是触发事件的一种,就是当鼠标移动到对象上就会产生这个事件。br例如input type="button" value="差贺test" onmouseover="alert('mouseover事件');"

js的onmouseover事件怎么用

你试一下下面的案例就明白了,贺顷这是最简单的用法

!DOCTYPE html

html

head

meta charset="utf-8"

title测试案例/title

script

function bigImg(x){

x.style.height="64px";

x.style.width="64px";

}

function normalImg(x){

x.style.height="32px";

x.style.width="32px";

}

/script

/head

body

img onmouseover="bigImg(this)" onmouseout="normalImg(this)"配拍茄 border="0" src="smiley.gif" alt="Smiley" width="32" height="32"

p函数 bigImg() 在鼠标指针移动到笑脸图片是触发培察。/p

p函数 normalImg() 在鼠标指针移出笑脸图片是触发./p

/body

/html

onmouseover事件触发的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于、onmouseover事件触发的信息别忘了在本站进行查找喔。