stopPropagation 不阻止默认答案

【问题标题】：stopPropagation without preventing defaultstopPropagation 不阻止默认
【发布时间】：2015-02-23 17:07:28
【问题描述】：

是否可以在不阻止默认事件行为的情况下停止事件传播？

这应该让输入在滚动时增加/减少，但阻止它冒泡到任何其他元素并滚动外部 div。（以下是仅限 Chrome，我认为）

$("input[type=number]").on("mousewheel",function(e){ // only works with chrome I think
  e.stopPropagation();
  console.log("scrolled");
});

div{
  height:50px;
  overflow:auto;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
  <input type='number'>
  <div class='filler'></div>
</div>

但stopPropagation 调用似乎什么也没做。外部 div 仍然滚动。

现在，这个特殊问题（滚动数字输入）可以通过preventingDefault 和手动递增和递减输入 (JSFiddle) 来解决。

我正在寻找一种不涉及重新创建默认行为的通用解决方案。

【问题讨论】：

你不能阻止滚动？
你的标题和你的问题是相反的。你想做什么：在不停止事件传播的情况下阻止默认，还是在不阻止默认的情况下停止事件传播？
@adeneo 真的吗？ document.body.addEventListener('mousewheel', function (e) {e.preventDefault();})
@meagar 哎呀，更正了。
我喜欢这个问题，但是我认为您没有其他选择可以使用 preventDefault 取消鼠标滚轮。 IE 仅在光标悬停在元素上时才会触发鼠标滚轮，无论是否聚焦。

标签： javascript html jquery dom-events stoppropagation

【解决方案1】：

一种可能的解决方法是在鼠标悬停时临时修复输入：

$("input[type=number]").on("mousewheel",function(e){ 
    e.stopPropagation();
}).on("mouseenter", function() {
    $(this).css("position", "fixed");
}).on("mouseleave", function() {
    $(this).css("position", "");
});

div{
  height:50px;
  overflow:auto;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
  <input type='number'>
  <div class='filler'></div>
</div>

【讨论】：

嗯，这符合标准。我不喜欢在这种事情上使用 mouseenter 事件，但这是我见过的最简单的方法。
@slicedtoad：是的，这并不理想，也许焦点/模糊会更合适。

【解决方案2】：

所以我认为 preventDefault 替代方案是唯一可以实现此功能的替代方案。

我想过这个替代方案，但基本相同。它在 div 上设置滚轮事件，并在检测到输入时取消它。

$("body > div").on("mousewheel",function(e){
    if (e.target && e.target.tagName == "INPUT")
        {

        var currentVal = $(e.target).val() === "" ? 0:parseInt($(e.target).val(),10);
        var step = $(e.target).attr("step") || 1;
        //should have some min/max handling to be complete
        if(e.originalEvent.wheelDelta > 0){
            $(e.target).val(currentVal+parseInt(step,10));
        }else{
            $(e.target).val(currentVal-parseInt(step,10));
        }
            e.preventDefault();
    }
});

http://jsfiddle.net/jgsp1ory/5/

【讨论】：