javascript - stopPropagation 而不阻止默认

Question

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

这应该让输入在滚动时递增/递减，但阻止它冒泡到任何其他元素并滚动外部 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 ) 来解决。

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

Answer 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>