是否可以在不阻止默认事件行为的情况下停止事件传播?
这应该让输入在滚动时递增/递减,但是阻止它冒泡到任何其他元素并滚动外部div。 (以下是仅镀铬,我认为)
$("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>
&#13;
但stopPropagation
电话似乎什么也没做。外部div仍然滚动。
现在,这个特殊问题(滚动数字输入)可以通过preventingDefault
解决并手动递增和递减输入(JSFiddle)。
我正在寻找一种不会重新创建默认行为的通用解决方案。
答案 0 :(得分:2)
一种可能的解决方法是在鼠标悬停时临时修复输入:
$("input[type=number]").on("mousewheel",function(e){
e.stopPropagation();
}).on("mouseenter", function() {
$(this).css("position", "fixed");
}).on("mouseleave", function() {
$(this).css("position", "");
});
&#13;
div{
height:50px;
overflow:auto;
border: 1px solid black;
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
所以preventDefault替代方案是我的意见,我认为唯一能使这项工作的方法。
我已经想到了这个替代方案,但基本相同。它在div上设置wheel事件,并在检测到输入时取消它。
$("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();
}
});