HTML - 点击按钮导致列表在顶部滚动，原因不明 [英] HTML - Click on button causes list to scroll on top for unknown reasons

问题描述

我使用tampermonkey将一些自定义按钮添加到

<现在点击名为的<按钮> 这是一个按钮，并注意滚动列表滚动到顶部和该按钮的代码不会执行（应显示警报）。再按一下按钮，注意代码现在已经执行，滚动列表再次滚动到顶部，然后在提醒上按OK。

接下来点击< div> 命名为这是一个div ，并注意一切都按预期工作。

.on（）， .stopPropagation（）和 .preventDefault（）。

但这里的优先级问题在于页面上有其他几个事件（特别是点击和鼠标松开）。 userscript代码导致页面的flexbox滚动状态发生混乱。

_{（图表A：滚动只发生在紧接着 mousedown 发生的事件 showConfirmBox（）。）}

是捕获所有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。

I am using tampermonkey to add some custom buttons to the Unity Documentation.

I noticed a strange problem If I am using a html <button>. Everytime when I click on the button, then the scroll list is scrolling to the top and the code is only executed on the second click.

---

However, If I replace <button> with <div> then everything is working perfectly fine.

---

Why is <button> behaving so weird?

Below is the tampermonkey script for reproduction.

// ==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);
}

---

Instructions

---

Wait until the site loaded completly (about 4 seconds until the site load indicator disapeared) then right click on a link in the scroll list at left, which should be as far as possible down (so you can see that the list is actually scrolling up after clicking on the button). Now a container should appear:

Now click on the <button> named This is a button and notice that the scroll list scrolls to the top and the code from the button is not executed (alert should show). Press again on the button and notice that the code is now executed and the scroll list scrolls to top again after pressing Ok on the alert.

Next click on the <div> named This is a div and note that everything works as expected.

解决方案

There are several issues with that script and, as Jim-miraidev pointed out, you need to use jQuery's .on(), .stopPropagation(), and .preventDefault().

But the priority problem here is that the page has several other events at play (especially click and mouseup). The userscript code is causing the page's flexbox scroll state to get confused.
_{(Exhibit A: the scroll only happens on first click immediately after the mousedown event that fires showConfirmBox().)}

So, an easy way to patch this is to capture all 3 of the (potentially) conflicting events:

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

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

---

Note that browsers fire the events in the order: mousedown, mouseup, click.

这篇关于HTML - 点击按钮导致列表在顶部滚动，原因不明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！