单击而不是滚动时的指针事件

Posted 2023-02-24

【中文标题】单击而不是滚动时的指针事件

【英文标题】：pointer events on click but not on scroll

【发布时间】：2016-10-17 16:23:56

【问题描述】：

是否可以允许点击但不允许滚动事件？

pointer-events: none;

将禁用这两种类型的输入，我想只禁用滚动。还有其他解决方法的想法吗？

【参考方案1】：

添加这个css：

.stopScroll
height:100%;
overflow:hidden;

然后在 jQuery 中：

$('body').addClass('stopScroll');

看小提琴：https://jsfiddle.net/26dct8o3/1/

如果您正在寻找这个，会有所帮助。否则，如果这不是您想要的，请在 cmets 中告诉我。

【讨论】：

评价，因为我认为这是对这个问题的正确答案，但是，我遇到了一个问题，我想要执行此操作的元素是 iframe（实际上是谷歌地图）。 pointer-events: none 防止滚动溢出： hidden 似乎没有影响。对这种情况有什么想法吗？

小提琴在地图上滚动，意图是它不在地图中滚动，而是在页面上滚动，但在地图中记录点击。

【参考方案2】：

用 javascript 来做：

function noScroll(event) 
    event = event || window.event;
    if (event.preventDefault) 
        event.preventDefault();
    
    event.returnValue = false;
    return false;


// disable scolling on the whole window:
if (!window.addEventListener) 
    // old IE only
    window.attachEvent("onscroll", noScroll);
 else 
    // Firefox only
    window.addEventListener("DOMMouseScroll", noScroll);
    // anything else
    window.addEventListener("scroll", noScroll);


// disable scrolling on a single element:
var el = document.getElementById("elementID");

if (!el.addEventListener) 
    el.attachEvent("onscroll", noScroll);
 else 
    el.addEventListener("DOMMouseScroll", noScroll);
    el.addEventListener("scroll", noScroll);

这应该可以解决问题。

【讨论】：

我需要在窗口上正常滚动，而不是只在 google 元素上滚动。我认为我的问题太简短了，我也要对此表示赞同，也许选择其中一个答案。

您也可以将此技术用于单个元素。我会更新我的答案以满足您的需求。我还应该提到，在 iframe 中禁用滚动是不可能的。

好的，我会接受这个答案，您可以通过父指针事件禁用滚动：无，但这也会禁用点击，这可能是原始问题。感谢您的帮助。