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

一、鼠标事件

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

varbox1 = documentgetElementById("box1"); box1onmousedown=function(){ box1stylebackgroundColor= 'green'; };

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

varbox1 = documentgetElementById("box1"); box1onmousedown=function(){ box1stylebackgroundColor= 'green'; }; box1onmouseup=function(){ box1stylebackgroundColor= 'red'; };

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

box1onmousemove =function(e){varx =epageX;vary =epageY; consolelog('鼠标横坐标为：'+x+'鼠标纵坐标为：'+y); };

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

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

varbox1 = documentgetElementById("box1"); box1onmouseenter=function(){ box1stylebackgroundColor= 'green'; };

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

varbox1 = documentgetElementById("box1"); box1onmouseenter=function(){ box1stylebackgroundColor= 'green'; }; box1onmouseleave=function(){ box1stylebackgroundColor= 'red'; };

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

box1onmouseover =function(){ consolelog(newDate()); };

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

二、手机触摸事件

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

varbox1 = documentgetElementById("box1"); box1ontouchstart=function(e){vartouch = etouches[0];varx =Number(touchclientX);vary =Number(touchclientY); consolelog("当前触摸点的横坐标"+x+"当前触摸点的纵坐标"+y); };

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

varbox1 = documentgetElementById("box1"); box1ontouchmove=function(e){vartouch = etouches[0];varx =Number(touchclientX);vary =Number(touchclientY); consolelog("当前触摸点的横坐标"+x+"当前触摸点的纵坐标"+y); };

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

varbox1 = documentgetElementById("box1"); box1ontouchstart=function(e){vartouch = etouches[0]; box1stylebackgroundColor= 'green'; };

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

一个父div，里面嵌一个子div。

开始的时候将子div隐藏，即：子divsyledisplay="none";

在父div添加onmouseover事件处理，将子divstyledisplay改成block。

对documentbody添加onmousemove事件，通过eventclientX和eventclientY来获取鼠标的位置，然后更新子div的位置为鼠标的位置。

原生自带的onmouseover是存在鼠标从子级移到父级上时，也代表over。所以就会出现多次触发onmouseover事件，但原生还提供了另外一种鼠标移入事件。是onmouseenter。使用这个事件，就把onmouseover的问题完美的解决掉了。

下面是代码，仅供参考：

    <div style="width:100px; height:100px; background:#ccc;">

        <h2 style="width:50px; height:100px; background:red;"></h2>

    </div>

</body>

<script>

    var oDiv = documentgetElementsByTagName('div')[0];

    var oH = documentgetElementsByTagName('h2')[0];

    oDivonmouseenter = function(){

        alert(1);

    };

</script>

主要是通过 onMouseOver 和onMouseOut两个事件控制层的显示与隐藏，

再通过获取鼠标位置来给层定位

下面是它的源码

<script>

//--初始化变量--

// from webjxcom

var rT=false;//允许图像过渡

var bT=false;//允许图像淡入淡出

var tw=150;//提示框宽度

var endaction=false;//结束动画

var ns4 = documentlayers;

var ns6 = documentgetElementById && !documentall;

var ie4 = documentall;

offsetX = 0;

offsetY = 20;

var toolTipSTYLE="";

function initToolTips()

{

if(ns4||ns6||ie4)

{

if(ns4) toolTipSTYLE = documenttoolTipLayer;

else if(ns6) toolTipSTYLE = documentgetElementById("toolTipLayer")style;

else if(ie4) toolTipSTYLE = documentalltoolTipLayerstyle;

if(ns4) documentcaptureEvents(EventMOUSEMOVE);

else

{

toolTipSTYLEvisibility = "visible";

toolTipSTYLEdisplay = "none";

}

documentonmousemove = moveToMouseLoc;

}

}

function toolTip(msg, fg, bg)

{

if(toolTipargumentslength < 1) // hide

{

if(ns4)

{

toolTipSTYLEvisibility = "hidden";

}

else

{

//--图象过渡，淡出处理--

if (!endaction) {toolTipSTYLEdisplay = "none";}

if (rT) documentall("msg1")filters[1]Apply();

if (bT) documentall("msg1")filters[2]Apply();

documentall("msg1")filters[0]opacity=0;

if (rT) documentall("msg1")filters[1]Play();

if (bT) documentall("msg1")filters[2]Play();

if (rT){

if (documentall("msg1")filters[1]status==1 || documentall("msg1")filters[1]status==0){

toolTipSTYLEdisplay = "none";}

}

if (bT){

if (documentall("msg1")filters[2]status==1 || documentall("msg1")filters[2]status==0){

toolTipSTYLEdisplay = "none";}

}

if (!rT && !bT) toolTipSTYLEdisplay = "none";

//----------------------

}

}

else // show

{

if(!fg) fg = "";

if(!bg) bg = "";

var content =

'<table id="msg1" name="msg1" style="FILTER: alpha(opacity=100)" border="0" cellspacing="0" cellpadding="0" bgcolor="' + fg + '" class="trans_msg"><td>' +

'<table border="0" background="images/11gif" width=189 height=245 cellspacing="0" cellpadding="12" bgcolor="' + bg +

'"><td width=' + tw + ' align=center><font face="Arial" color="' + fg +

'" size="-2">' + msg +

'&nbsp\;</font></td></table></td></table>';

if(ns4)

{

toolTipSTYLEdocumentwrite(content);

toolTipSTYLEdocumentclose();

toolTipSTYLEvisibility = "visible";

}

if(ns6)

{

documentgetElementById("toolTipLayer")innerHTML = content;

toolTipSTYLEdisplay='block'

}

if(ie4)

{

documentall("toolTipLayer")innerHTML=content;

toolTipSTYLEdisplay='block'

//--图象过渡，淡入处理--

var cssopaction=documentall("msg1")filters[0]opacity

documentall("msg1")filters[0]opacity=0;

if (rT) documentall("msg1")filters[1]Apply();

if (bT) documentall("msg1")filters[2]Apply();

documentall("msg1")filters[0]opacity=cssopaction;

if (rT) documentall("msg1")filters[1]Play();

if (bT) documentall("msg1")filters[2]Play();

//----------------------

}

}

}

function moveToMouseLoc(e)

{

if(ns4||ns6)

{

x = epageX;

y = epageY;

}

else

{

x = eventx + documentbodyscrollLeft;

y = eventy + documentbodyscrollTop;

}

toolTipSTYLEleft = x + offsetX;

toolTipSTYLEtop = y + offsetY;

return true;

}

</script>

以上就是关于手机端单击和鼠标经过触发什么事件全部的内容，包括:手机端单击和鼠标经过触发什么事件、在HTML里，当我鼠标移到一个div里 就显示一个隐藏的子div 并且鼠标移到哪 子div就跟到哪！求大神指教、关于javascript的鼠标经过的问题 onmouseover等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！