a標簽是如何被觸發(fā)跳轉的

MadPecker 發(fā)布于2019-08-21 10:47 / 3500人閱讀

摘要：測試結果標簽跳轉只被事件觸發(fā)。值得注意的是，在之前被觸發(fā)。在端，手指觸摸屏幕，就會觸發(fā)標簽跳轉，但是如果過程中手指有移動，就觸發(fā)不了標簽跳轉。

在統(tǒng)計按鈕點擊跳轉次數(shù)時，給按鈕綁定了touchstart事件，結果導致統(tǒng)計數(shù)據(jù)翻了近10倍。后改用click事件，數(shù)據(jù)才正常。固有此文。

問題

當我們點擊鼠標時，會觸發(fā)一系列mouse/touch/click事件，a標簽轉跳是被什么事件觸發(fā)的?

PC：在 div1 按下鼠標左鍵, 在div2 中釋放鼠標左鍵,是否會觸發(fā)click事件?

PC：在 div1 按下鼠標左鍵后，再在同一綁定事件的節(jié)點中移動鼠標，最后釋放鼠標左鍵。是否會觸發(fā)click事件?

M: 在 div1 觸按屏幕, 再在div2 中釋放觸按,是否會觸發(fā)click事件?

M：在 div1 觸按屏幕，再在同一綁定事件的節(jié)點中移動手指，最后移釋放觸按。是否會觸發(fā)click事件?

知道以上5個問題的結果的就可以不往下看了。

demo共用一段html

1. 當我們點擊鼠標時，會觸發(fā)一系列mouse/touch/pointer事件，a標簽轉跳是被什么事件觸發(fā)的?

var events = "click touchstart touchend mousedown mouseup".split(" ");
var n = 0;
var timer = setInterval(function(){
    var event = new Event(events[n]);
    document.getElementById("a").dispatchEvent(event); // 創(chuàng)建一系列事件，直接在元素節(jié)點上觸發(fā)。
    console.log(event.type);
    n++;
    if (n == events.length) {
        clearInterval(timer);
    }
},2000);

測試結果： a標簽跳轉只被 click 事件觸發(fā)。

2. PC：在 div1 按下鼠標左鍵, 在div2 中釋放鼠標左鍵,是否會觸發(fā)click事件? 3.PC：在 div1 按下鼠標左鍵后，再在同一綁定事件的節(jié)點中移動鼠標，最后釋放鼠標左鍵。是否會觸發(fā)click事件?

var events = "click mousedown mouseup".split(" ");
var divs = document.getElementsByTagName("div");
var handler = function(e){
    e.preventDefault();
    this.innerHTML +=  " type:" + e.type + " target:" + e.target.className + " this:" + this.className;
};

for (var i=0; i 
測試結果:
問題2、問題3，在相同綁定事件元素中，按下鼠標左鍵，即使移動也會觸發(fā) click 事件，而在不同元素中不會觸發(fā) click 事件。
在測試問題3的過程中我們還發(fā)現(xiàn)，按下鼠標左鍵觸發(fā)的是 div1 綁定的mousedown事件，釋放鼠標左鍵觸發(fā)的是 div2 綁定的mouseup事件。
我們可以這樣認為，在點擊鼠標左鍵時，只有在同一元素中先觸發(fā)mousedown事件再觸發(fā)mouseup事件，click事件才會被觸發(fā)，a標簽才會轉跳
4. M: 在 div1 觸按屏幕, 再在div2 中釋放觸按,是否會觸發(fā)click事件?
5. M：在 div1 觸按屏幕，再在同一綁定事件的節(jié)點中移動手指，最后移釋放觸按。 是否會觸發(fā)click事件?
var events = "click touchstart touchend mousedown mouseup".split(" ");
var divs = document.getElementsByTagName("div");
var handler = function(e){
    e.preventDefault();
    this.innerHTML +=  " type:" + e.type + " target:" + e.target.className + " this:" + this.className;
};

for (var i=0; i 
測試結果:
問題4，在 div1 觸按屏幕, 再在div2 中釋放觸按，只會觸發(fā)div1的 touchstart 和 touchend 事件，不會觸發(fā)div2的 touchend 事件，并且不會觸發(fā)mousedown mouseup click事件。
問題5，只要移動了手指，mousedown mouseup click事件就不被觸發(fā)。
如果觸摸屏幕，這些事件的觸發(fā)順序也是很有趣。 
touchstart -> touchend -> mousedown -> mouseup -> click。
值得注意的是，touchend在mousedown之前被觸發(fā)。
總結
a標簽跳轉只被click事件觸發(fā)。
在PC端，點擊鼠標左鍵，即使在a標簽鏈接上移動鼠標，也會觸發(fā)a標簽跳轉。
在M端，手指觸摸屏幕，就會觸發(fā)a標簽跳轉，但是如果過程中手指有移動，就觸發(fā)不了a標簽跳轉。

GPU云服務器云服務器 jsp如何頁面跳轉的 php頁面跳轉的太快 a標簽href跳轉 html標簽跳轉網(wǎng)頁

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/86209.html

加推Weex實踐之路（上）

摘要：我們參考小程序的設計思路進行了優(yōu)化升級，為每一個需要特有化配置的頁面添加一個格式的配置文件，配置文件包括導航欄的配置頁面級別的配置跳轉的配置等，將配置工程化標準化。設置導航欄按鈕包含按鈕樣式的數(shù)組通過完成按鈕事件的回調(diào)。一、背景1.為什么是Weex在公司快速發(fā)展的大環(huán)境下，App的更新迭代高速、高頻，技術團隊平均兩周便可誕生一款中型App，但App團隊只有6個人（iOS 、Android各3...

shuibo 2019-05-22 19:43 評論0 收藏0
Fiori Launchpad Tile點擊后跳轉的調(diào)試技巧

摘要：在里點擊某個之后，后臺會計算出跳轉的目標返回給前臺。每個點擊之后，會打開一個對應的應用。本文介紹如何在后臺調(diào)試這個跳轉目標的計算邏輯。字段的值就是該應用對應的應用的存儲位置。在SAP Fiori launchpad 里點擊某個tile之后，后臺會計算出跳轉的目標url返回給前臺。下圖中一個個白色的方框就成為tile。每個tile點擊之后，會打開一個對應的Fiori應用。 showI...

xiaokai 2019-08-01 18:38 評論0 收藏0
Fiori Launchpad Tile點擊后跳轉的調(diào)試技巧

摘要：在里點擊某個之后，后臺會計算出跳轉的目標返回給前臺。每個點擊之后，會打開一個對應的應用。本文介紹如何在后臺調(diào)試這個跳轉目標的計算邏輯。字段的值就是該應用對應的應用的存儲位置。在SAP Fiori launchpad 里點擊某個tile之后，后臺會計算出跳轉的目標url返回給前臺。下圖中一個個白色的方框就成為tile。每個tile點擊之后，會打開一個對應的Fiori應用。 showI...

RichardXG 2019-08-22 14:47 評論0 收藏0
Fiori Launchpad Tile點擊后跳轉的調(diào)試技巧

摘要：在里點擊某個之后，后臺會計算出跳轉的目標返回給前臺。每個點擊之后，會打開一個對應的應用。本文介紹如何在后臺調(diào)試這個跳轉目標的計算邏輯。字段的值就是該應用對應的應用的存儲位置。在SAP Fiori launchpad 里點擊某個tile之后，后臺會計算出跳轉的目標url返回給前臺。下圖中一個個白色的方框就成為tile。每個tile點擊之后，會打開一個對應的Fiori應用。 showI...

zhisheng 2019-08-15 14:22 評論0 收藏0