使用javascript禁用中键滚动

IT技术 javascript jquery scroll jquery-events
2021-03-21 05:27:19

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

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

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

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

重点:我使用 e.preventDefault() 希望它能停止滚动的中间点击默认行为。它没有。我该怎么做才能阻止滚动操作激活?

另请参阅“使用中键触发 onclick 事件”

4个回答

可以使用 Javascript 禁用中键单击,但只能在 IE、WebKit 和 Konquerer 中禁用。Firefox 需要一个配置文件 edit现在是 2017 年,Firefox 50 支持这一点。

+1 很棒的链接:充满信息。正是测试页面 ( unixpapa.com/js/testmouse.html ) 激发了我对当前解决方案的灵感。
2021-05-15 05:27:19

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

现在,你可以用一行普通的 JS 来做到这一点:

document.body.onmousedown = function(e) { if (e.button === 1) return false; }
我可以确认这适用于 IE 11、Chrome 和 Firefox。
2021-05-07 05:27:19

目前,我的解决方案是这样的:(更多 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 上测试。

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

检查是否创建了一个空的 HTML 文件(或一个包含几个段落的小文档)并在 Firefox 中加载它,中间单击滚动条不会出现。这是因为<body>的宽度和高度小于窗口大小。如果您放置了很多<br>'s,则情况并非如此,并且在单击鼠标中键时会出现滚动条。

谷歌通过确保(通过 JS)<body>大小总是小于窗口大小,加上另外放置 <body style="overflow:hidden;">.

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