집 > 기사 > 웹 프론트엔드 > Javascript는 마우스 휠 events_javascript 기술 비활성화를 구현합니다.

Javascript는 마우스 휠 events_javascript 기술 비활성화를 구현합니다.

WBOY원래의: 2016-05-16 15:49:191960검색

호환되는 부분에 관해서는 보통 IE 하위 버전의 호환성을 조정하는데, 이번에는 하위 버전의 브라우저가 무능해서 그런 것은 아닙니다. Firefox가 너무 멀리 나아갔고 다른 브라우저의 경험을 완전히 무시했기 때문입니다. Firefox를 제외한 모든 브라우저는 MouseWheel 이벤트를 사용하여 마우스 휠의 응답을 처리할 수 있습니다. 그러나 Firefox는 MouseWheel을 지원하지 않으며 Firefox를 제외한 다른 브라우저와 호환되지 않는 무의미한 DOMMouseScroll을 사용합니다. 즉, 마우스 휠 이벤트를 처리하기 위해 Firefox는 DOMMouseScroll만 사용할 수 있습니다. Firefox 이외의 제품에서는 MouseWheel만 사용할 수 있습니다. 이 두 이벤트의 원리는 다르며 처리하는 데이터도 다릅니다.

var firefox = navigator.userAgent.indexOf('Firefox') != -1;
firefox &#63; img.addEventListener('DOMMouseScroll', MouseWheel, false) : 
     (img.onmousewheel = MouseWheel);
 
  function MouseWheel(e) {
    e = e || window.event;
 
    if (e.stopPropagation) e.stopPropagation();
    else e.cancelBubble = true;
     
    if (e.preventDefault) e.preventDefault();
    else e.returnValue = false;
 
  }

전체 코드를 살펴보겠습니다

<!DOCTYPE html>
<style>
span {font:14px/20px 微软雅黑;}
#counter {
 width:50px;height:20px;
 border:1px solid #CCC;
 background:#F9F9F9;
 font:14px/20px Consolas;
 text-align:center;
 margin:10px;
}
</style>
<span>使用鼠标滚轮调整数值大小</span><br/>
<div id="counter">0</div>
<script>
//判断浏览器
var isIE=navigator.userAgent.match(/MSIE (\d)/i);
isIE=isIE&#63;isIE[1]:undefined;
var isFF=/FireFox/i.test(navigator.userAgent);
//获取元素
var counter=document.getElementById("counter");
//鼠标滚轮事件
if(isIE<9) //传统浏览器使用MouseWheel事件
 counter.attachEvent("onmousewheel",function(){
  //计算鼠标滚轮滚动的距离
  //一格3行，每行40像素，所以除以120
  var v=event.wheelDelta/120;
  counter.innerHTML=counter.innerHTML*1+v;
  //阻止浏览器默认方法
  return false;
 });
else if(!isFF) //除火狐外的现代浏览器也使用MouseWheel事件
 counter.addEventListener("mousewheel",function(e){
  //计算鼠标滚轮滚动的距离
  var v=e.wheelDelta/120;
  counter.innerHTML=counter.innerHTML*1+v;
  //阻止浏览器默认方法
  e.preventDefault();
 },false);
else //奇葩的火狐使用DOMMouseScroll事件
 counter.addEventListener("DOMMouseScroll",function(e){
  //计算鼠标滚轮滚动的距离
  //一格是3行，但是要注意，这里和像素不同的是它是负值
  var v=-e.detail/3;
  counter.innerHTML=counter.innerHTML*1+v;
  //阻止浏览器默认方法
  e.preventDefault();
 },false);
</script>

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.

성명：

이전 기사：js 한자 정렬 방법_javascript 기술다음 기사：js 한자 정렬 방법_javascript 기술

Javascript는 마우스 휠 events_javascript 기술 비활성화를 구현합니다.

관련 기사