jQ中鼠标滚轮事件事件吗
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQ中鼠标滚轮事件事件吗相关的知识，希望对你有一定的参考价值。
jQuery 不直接支持鼠标滑轮事件，有一个插件叫做 jQuery Mousewheel，你可以 Google 一下
但用原生 javascript 也可以轻松来实现
// 鼠标滑轮滚动后执行的函数
// delta > 0 = 向上滚动
// delta < 0 = 向下滚动
function mousewheelEvent(e, delta)
document.getElementById("debug").innerhtml += (delta + "<br />");
// 其它代码...
if (document.attachEvent)
document.attachEvent("onmousewheel", function(e)
mousewheelEvent(e, e.wheelDelta);
);
else if (document.addEventListener)
document.addEventListener("DOMMouseScroll", function(e)
mousewheelEvent(e, e.detail * -40);
, false);
</script>
<div id="debug" style="position: fixed"></div> 参考技术A
jquery插件默认是不支持鼠标中轮滚轮事件的。jQuery Mousewheel Plugin,用于添加跨浏览器的鼠标滚轮支持。mousewheel事件的处理函数有一点小小的变化，它除了第一个参数event 外，还接收到第二个参数delta。通过参数delta可以获取鼠标滚轮的方向和速度。如果delta的值是负的即-1，那么滚轮就是向下滚动，正的1就是向上。
1.下载jquery-mousewheel插件。
2,复制代码: $('body').mousewheel(function(event, delta) var dir = delta > 0 ? 'Up' : 'Down'; if (dir == 'Up')
console.log('向上滚动');
else
console.log('向下滚动');
return false;
);
http://www.jb51.net/article/50677.htm<label for="wheelDelta">滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta"/>
<label for="detail">滚动值:(Firefox)</label><input type="text" id="detail"/><script type="text/javascript">
var scrollFunc=function(e)
e=e || window.event;
var t1=document.getElementById("wheelDelta");
var t2=document.getElementById("detail");
if(e.wheelDelta)//IE/Opera/Chrome
t1.value=e.wheelDelta;
else if(e.detail)//Firefox
t2.value=e.detail;
/*注册事件*/
if(document.addEventListener)
document.addEventListener('DOMMouseScroll',scrollFunc,false);
//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
</script> 参考技术D 没有吧，手册里都没找到这个呢
SVG 阻止触摸/鼠标滚轮事件
【中文标题】SVG 阻止触摸/鼠标滚轮事件【英文标题】：SVG Blocks Touch/Mousewheel events 【发布时间】：2013-05-04 13:59:49 【问题描述】：有解决方法吗？我正在运行我自己的自定义滚动条脚本，而不是使用内置的浏览器功能。出于多种原因，我更喜欢将 SVG 用于我的图像元素，但其中一个非常重要的缺陷是触摸或鼠标滑过 svg 会阻止事件，从而使页面滚动停止。这在 svg 可能占据整个文档宽度的移动浏览器上更为明显，在这种情况下，一旦您到达 SVG 元素，用户就无法滚动过去。
我没有在 IE 中测试过，但是在 Chrome 中，触摸命令在 SVG 上不起作用，而在 Firefox 上，鼠标滚轮事件是个问题。我想它都会在 IE 上哈哈。
一个不错的解决方案是以某种方式向我的 SVG 元素添加一个事件，以捕获这些事件并将它们传递给滚动事件。我似乎找不到方法。一个更好的解决方案是以某种方式将文档放在 SVG 上方，这样 SVG 就不会干扰滚动。再次，似乎找不到方法。
我将我的 SVG 元素嵌入到对象标签中，出于各种原因，这很重要。我假设对象标签实际上是罪魁祸首。
【问题讨论】：
这是一种奇怪的行为，SVG 中是否嵌入了任何 javascript？将object pointer-events: none; 添加到您的 CSS 中应该可以解决 Firefox 和 Chrome（但不是 IE）中的问题。
【参考方案1】：
根据 Duopixel 的评论。添加：
object
pointer-events: none;
到 css 确实解决了 Firefox 和 Chrome 中的问题。我仍然需要在 IE 中进行测试，但目前这似乎是最好和最简单的解决方案。
解释指针事件属性的好文章可以在http://davidwalsh.name/pointer-events找到
如果上述问题是 IE 中的问题，您可以使用需要捕获指针位置并将其传递给适当元素的 javascript 解决方案。可以在此处找到使用 jQuery 但可以很容易地转换为 vanilla javascript 的工作版本：http://jsbin.com/uhuto/1/edit
【讨论】：
加一个用于发布一个好问题并发布一个更好的答案。以上是关于jQ中鼠标滚轮事件事件吗的主要内容，如果未能解决你的问题，请参考以下文章