jsコア基礎のEventsイベント機構(移動端イベント、PC端イベント、イベントクリア)

PCの端はpcで、ウェブページの操作はすべてマウスを使っています.すなわち応答はすべてマウスイベントです.mousedown、mouseup、clickを含んでいます.通常、clickイベントはmouseupの後に触発されます.300 ms後に、この時間によってイベント(不正確)1、mousedownをダブルクリックするかどうかを判断します.2、mouseup、ユーザーがこの元素の上でマウスボタンを放した時、大体mousedownの後の88 msの時に触発されます.3、clickは、一つのmousedownと一つのmouseupがこの要素で検出された時に発生し、またmousueupと同じ時間にトリガされます.
注:要素ノードでは、mousedownとmouseupをトリガすると必ずclickイベントが発生します.prenventdefaultは阻止できません.
移動端がほとんどタッチイベントtouch start:/指をスクリーンに置いた時に触発され、もう一つの指がスクリーンに置いてもtouchmoveを触発します./指がスクリーン上でスライド式にtouchendを触発します./指がスクリーンを離れる時にtouchstart 70 ms後にtouchcancelを触発します.これはちょっと少ないようです.
モバイル端末では、touchend後、またはmousedown、mouseup、clickなどのイベントをトリガし、touchstart 70 ms後にevent.preventdefaultを使用すると、mousedownなどのイベントが発生しなくなります.
イベントは、mousedownを使用した後、現在のノードを非表示にし、現在はまたclickイベントをバインドしている場合、ノードが存在しないため、ノードの下のノードをトリガする.

<div id="div">
    div
div>

<div id="div1">
    div1
div>

#div {
    width: 300px;
    height: 200px;
    background: darkcyan;
}

#div1 {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 100px;
    left: 20px;
    background: red;
}

var div = document.getElementById('div');
div.addEventListener('click', function (event) {
    console.log('div-------click----------------------------', event);
})
div.addEventListener('mousedown', function (event) {
    console.log('div------mousdown----------------------', event);
})
div.addEventListener('mouseup', function (event) {
    console.log('div--------mouseup---------------------------', event);
})

var div1 = document.getElementById('div1');
div1.addEventListener('mousedown', function (event) {
    console.log('div1******mousedown******', event);
    div1.style = 'display:none;';
})
div1.addEventListener('mouseup', function (event) {
    console.log('div1******mouseup******', event);
})
div1.addEventListener('click', function (event) {
    console.log('div1******click******', event);
})

結果:

div1******mousedown******
div--------mouseup---------------------------

原理:すなわち、mousedownの後、div 1を隠します.div 1はもうなくなりました.だから、div 1のmouseup、click事件は触発されませんでした.したがって、mouseup事件はdivによって受信されたので、mouseup事件を引き起こしました.div 1のclick事件の倍は誰が受信しましたか?道理では、divにも受信されましたが、divではmousedown事件を触発していませんので、mouseup事件だけを触発しました.だから、click事件を触発したわけではありません.
touch startを使うとdiv 1を隠します.js

var div = document.getElementById('div');
div.addEventListener('click', function (event) {
    console.log('div-------click----------------------------', event.timeStamp);
})
div.addEventListener('mousedown', function (event) {
    console.log('div------mousdown----------------------', event.timeStamp);
})
div.addEventListener('mouseup', function (event) {
    console.log('div--------mouseup---------------------------', event.timeStamp);
})

var div1 = document.getElementById('div1');
div1.addEventListener('mousedown', function (event) {
    console.log('div1******mousedown******', event.timeStamp);
})
div1.addEventListener('mouseup', function (event) {
    console.log('div1******mouseup******', event.timeStamp);
})
div1.addEventListener('click', function (event) {
    console.log('div1******click******', event.timeStamp);
})

//touch

div1.addEventListener('touchstart', function (event) {
    console.log('div1******touchstart******', event.timeStamp);
})
div1.addEventListener('touchend', function (event) {
    console.log('div1******touchend******', event.timeStamp);
    div1.style = 'display:none;';
    // event.preventDefault();
})

結果:

div1******touchstart****** 1363.88
div1******touchend****** 1435.7350000000001
div------mousdown---------------------- 1435.7350000000001
div--------mouseup--------------------------- 1435.7350000000001
div-------click---------------------------- 1435.7350000000001

原理:div 1自体のイベントトリガイベントはtouchstart->touchend=mousdown=mouseup=clickです.ですから、touch startやtouchendで隠してもmousedown、mouseup、clickがトリガされますので、div 1が隠しているとdivの一連の関数がトリガされます.