【问题标题】:Disabling middle click scrolling with javascript使用javascript禁用中间点击滚动
【发布时间】:2010-12-28 04:51:10
【问题描述】:

背景:我正在创建一个让人想起whenisgood.net 的表格,因为它具有点击并拖动表格元素的切换功能。当鼠标左键、中键和右键激活mousedown 事件时,我想调用不同类型的切换代码。

通过使用 JQuery,我有了一个良好的开端。

$(".togglable").bind("contextmenu", function() {return false;});
$(".togglable").bind("mousedown", function(e){
  e.preventDefault();
  toggle(this, e);
});

toggle() 函数中,我可以使用e.which 来确定点击了哪个按钮。

妙语:我使用了 e.preventDefault() 希望它能阻止中间点击默认的滚动行为。它没有。 我可以做些什么来阻止滚动动作激活?

另见"Triggering onclick event using middle click"

【问题讨论】:

    标签: javascript jquery scroll jquery-events


    【解决方案1】:

    Middle-click can be disabled with Javascript,但仅限于 IE、WebKit 和 Konquerer。 Firefox 需要编辑配置文件。现在是 2017 年,Firefox 50 支持这一点。

    【讨论】:

    【解决方案2】:

    这是一个老问题......但如果我理解正确,您希望通过单击鼠标中键来禁用滚动。

    现在,你可以用一行 vanilla JS 做到这一点:

    document.body.onmousedown = function(e) { if (e.button === 1) return false; }
    

    【讨论】:

    • 我可以确认这适用于 IE 11、Chrome 和 Firefox。
    【解决方案3】:

    目前,我的解决方案是这样的:(更多 jquery!)

    $(".togglable").wrap(
      "<a href='javascript:void(0);'
      onclick='return false;'></a>"
    );
    

    通过将其包装在一个链接中(通过jquery wrap),浏览器会认为它是一个链接,并且即使您拖动鼠标也不会在中键时滚动。有了这个设置和我的情况,有几个(小)问题。

    当您单击鼠标中键时,Firefox 将打开一个新选项卡,但前提是您不拖动。 Opera 将在您中键单击、拖动或不拖动时打开一个新选项卡。这就是我使用href='javascript:void(0);' 而不是href='#' 的原因——这样客户端的浏览器就不会加载整个页面,而只是一个带有奇怪 url 的空白页面。

    但是这个解决方案在 Chrome 和 Safari 上的作用就像一个魅力。它适用于 IE8,除了现在当我左键单击并拖动时,它会将指针更改为“不能这样做”符号,因为它认为我想将链接拖到某个地方。在旧版本的 IE 上未经测试。

    【讨论】:

      【解决方案4】:

      这已经有点老了,但我已经努力在 Firefox 中规避这个问题(我仍在使用 3.6),我会分享我的发现,也许有人会觉得它有帮助。

      检查如果您创建一个空的 HTML 文件(或包含几个段落的小文档)并在 Firefox 中加载它,中间单击滚动条不会出现。这是因为&lt;body&gt; 的宽度和高度小于窗口大小。如果你放了很多&lt;br&gt;的,情况就不是这样了,鼠标中键出现滚动条。

      Google 通过确保(通过 JS)&lt;body&gt; 的大小始终小于窗口大小,并另外放置 &lt;body style="overflow:hidden;"&gt;.

      这在一般情况下很难实现,但有时可能有用。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2015-07-26
        • 2022-11-11
        • 2015-10-22
        • 2018-07-01
        相关资源
        最近更新 更多