Question

我目前正在使用此插件mouse wheel

$('#painter').on('mousewheel', function(e) {
        cp.scale(2, 2);
        var e0 = e.originalEvent,
            delta = e0.wheelDelta || -e0.detail;
        this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
        e.preventDefault();
        console.log(e.deltaX, e.deltaY, e.deltaFactor);
    });

当画家是画布的时候，事情是cp.scale事件永远不会被解雇，而如果我把它放在鼠标滚轮功能它将起作用...不知道为什么

代码的其余部分正在工作，只是规模部分没有完成其工作

Answer 1

而不是试图调试插件，这里的鼠标轮代码对我来说效果很好（不需要插件）。

带注释的代码和演示：

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

// Listen for 2 wheel events
// mousewheel for IE, DOMMouseScroll for everyone else
canvas.addEventListener('mousewheel',handleScroll,false);
canvas.addEventListener('DOMMouseScroll',handleScroll,false);

var ups=0;
var downs=0;
$results=$('#results');

//
function handleScroll(e){

  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  // Determine wheel direction
  // -------------------------
  // Adjust for different browsers
  // FF returns e.detail 
  //    where wheelups are - and wheeldowns are +
  // Other browsers return e.wheelData 
  //    where wheelups are + and wheeldowns are -   
  if(e.wheelDelta){
    var direction=e.wheelDelta>0?1:-1;
  }else{
    // Firefox (returns - for wheelups & + for wheeldowns)
    var direction=e.detail<0?1:-1;
  }

  // 'direction' holds +1 for wheelup, -1 for wheeldown

  // Do stuff!
  if(direction>0){ ups++; }
  if(direction<0){ downs++; }
  $results.text('Ups='+ups+', Downs='+downs+', Net='+(ups-downs));

};

＆＃13;

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4 id='results'>Click in canvas and scroll the mouse wheel</h4>
<canvas id="canvas" width=300 height=300></canvas>

＆＃13;

jQuery鼠标滚轮插件规模问题

1 个答案: