本篇文章给大家谈谈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事件触发的信息别忘了在本站进行查找喔。