HTML-單擊按鈕會使列表在未知原因的頂部滾動

Question

我正在使用tampermonkey向Unity文檔中添加一些自定義按鈕。

我注意到一個奇怪的問題，如果我使用的是html <button> 。 每當我單擊按鈕時，滾動列表就會滾動到頂部，並且僅在第二次單擊時才執行代碼。

---

但是，如果我將<button>替換為<div>那么一切工作都很好。

---

為什么<button>如此怪異？

下面是用於復制的tampermonkey腳本。

// ==UserScript==
// @name         Unity Documentation (bugtest)
// @namespace    https://docs.unity3d.com
// @version      1.0
// @description  test
// @author       Edward Black
// @match        *://docs.unity3d.com/*
// @grant        GM_addStyle
// ==/UserScript==

GM_addStyle('.confirmBox { z-index: 100; width: 275px; background-color: greenyellow; border: 1px solid black; }');
GM_addStyle('.confirmBoxButtons { margin-top: 5px; }');
GM_addStyle('.confirmBoxClose { position: absolute; height: 20px; width: 20px; background-color: white; color:black; border: 0.5px solid black; text-align: center; right: 0px; }');
GM_addStyle('.confirmBoxClose:hover { background-color: black; color:white; cursor: pointer; }');
GM_addStyle('.confirmBoxBtn { background-color: white; color:black; width: 100px; border: 1px solid black; }');
GM_addStyle('.confirmBoxBtn:hover { background-color: black; color:white; cursor: pointer; }');

$(document).ready(function() {

    setTimeout(function() {
        prepareCustomContextMenue();
        $("div.mCSB_container").delegate("#theButton", "click", function() {
            alert("Hello from Button");
        });
        $("div.mCSB_container").delegate("#theDiv", "click", function() {
            alert("Hello from Div");
        });
        $("div.mCSB_container").delegate(".confirmBoxClose", "click", function() {
            $(".confirmBox").remove();
        });

    }, 4000);


});

function prepareCustomContextMenue()
{
    $("div.mCSB_container").find("a").each(function(j, obj) {

        $(obj).on("contextmenu", function(){
            return false;
        });
        $(obj).on("mousedown", function(e){
            if( e.button == 2 ) {

                console.log('Right mouse button!');
                showConfirmBox(this);

                return false;
            }
            return true;
        });
    });
}

function showConfirmBox(container)
{
    $(".confirmBox").remove();

    var elm = '<li><div class="confirmBox">'+
                  '<div class="confirmBoxClose">x</div>' +

                  '<div class="confirmBoxButtons">' +
                      '<button id="theButton" class="confirmBoxBtn"> This is a button </button>' +
                      '<div id="theDiv" class="confirmBoxBtn"> This is a div </div>' +
                  '</div>' +
              '</div></li>';

    $parent = $(container).parent();
    $(elm).appendTo($parent);
}

---

說明

---

等待站點完全加載（大約4秒鍾，直到站點加載指示符消失），然后右鍵單擊左側滾動列表中的鏈接，該鏈接應盡可能向下（這樣您就可以看到列表實際上在向上滾動）單擊按鈕后）。 現在應該出現一個容器：

現在，單擊名為“ This is a button的<button> ，注意滾動列表滾動到頂部，並且該按鈕中的代碼未執行（警告應顯示）。 再次按按鈕，注意代碼現在已執行，並且在警報上單擊“確定”后，滾動列表再次滾動到頂部。

接下來，單擊名為“ This is a div的<div> ，注意所有操作均按預期進行。

Answer 1

該腳本存在多個問題，正如Jim-miraidev所指出的，您需要使用jQuery的.on() .stopPropagation()和.preventDefault() 。

但是這里的優先權問題是頁面上還有其他幾個事件 （尤其是click和mouseup ） 在起作用 。 用戶腳本代碼導致頁面的flexbox滾動狀態變得混亂。
_{（圖表A：滾動僅在觸發showConfirmBox()的mousedown事件之后立即在第一次單擊時發生。）}

因此，修補此問題的一種簡單方法是捕獲所有3個（潛在）沖突事件 ：

$("div.mCSB_container").on ("click mousedown mouseup", "#theButton", function (zEvent) {
    zEvent.preventDefault ();
    zEvent.stopPropagation ();

    if (zEvent.type == "mousedown") {
        console.log ("Hello from Button");
    }
} );

---

請注意，瀏覽器按以下順序觸發事件：mousedown，mouseup，click。

Answer 2

默認情況下，按鈕將提交頁面，從而刷新頁面。

<button id="theButton" class="confirmBoxBtn"> This is a button </button>

按鈕的默認“類型”是“提交”，它會自行發布。 將按鈕“類型”更新為“按鈕”。

<button type="button" id="theButton" class="confirmBoxBtn"> This is a button </button>

從jQuery 3.0開始，delagate（）也已棄用。 更新為

 $("#theButton").on("click", function(e) {
      // remove default of the click
      e.preventDefault();
      // stop propagation
      e.stopPropagation();
     alert("Hello from Button");
 });