jquery function keeps running mousemove event?

Question

I wrote this script to make a turnable button in a web page. It works pretty good but it doesn't want to get out the function. It keeps running the code inside the brackets. Any idea how I can fix that? This is the code i have now.

If you press your mouse down and you drag the value will change. But now it's everywhere and it may only happen if you click on the button and than drag.

function pressed(){
var PosibleVal = new Array(8,41,74,107,140,174);
$(window).on("mousemove", function(e) {
    if (e.which == 1) { // if left mouse button is pressed
      var posY=(e.pageY - 158)*(-1); // read the mouse Y-position 

        if(posY<0)
        {
            posY=0;
        }
        if(posY>180)
        {
            posY=180;
        }
        var ar = Math.round(posY/33); //Round number 

        var cssPosY = "-webkit-transform:rotate("+PosibleVal[ar]+"deg)";
        $("#innerheater").attr("style", cssPosY); // change rotation
    } 
});

}

HERE is a link to the example.(It works only in chrome and safari)

score 0 · Accepted Answer · answered Mar 23 '13 at 12:15

0

I would have done it this way

<script type="text/javascript">
$(document).ready(function()
{
    var PosibleVal = new Array(8,41,74,107,140,174);
    $('#heater').on("mousemove", function(e)
    {
         if (e.which == 1) {
         var posY=(e.pageY - 158)*(-1);

         if(posY<0)
            posY=0;
         if(posY>180)
            posY=180;
         var ar = Math.round(posY/33); //geen komma getal
         var cssPosY = "-webkit-transform:rotate("+PosibleVal[ar]+"deg)";
         $("#innerheater").attr("style", cssPosY);
    } 
});
</script>

Having the onMouseMove event on the #heater div would be more logical for me. You can then replace this <div id="heater" onclick="pressed()"> by <div id="heater">.

answered Mar 23 '13 at 12:15

Micka

1,648
1
19
34

You can then use [this solution](http://stackoverflow.com/questions/2700000/how-to-disable-text-selection-using-jquery#answer-2700029) to disable and enable "text selection" during the on MouseMove event. – Micka Mar 23 '13 at 12:21
Thanks for the tip but my problem isn't solved yet. The mousemove can be every where but it may only run if you first press the button. And now it alsow runs if you press next to the button. – kobey Mar 25 '13 at 15:38
Actually yes, because `#heater` is a square containing your image, so if you click in this square it will fire the event. From here i see 2 options for you: 1- you place a `div with rounded corners` that perfectly fit your image (but you will have troubles with old IE versions) or 2- you create a `round clickable canvas` on which you can set an event. – Micka Mar 27 '13 at 15:15

jquery function keeps running mousemove event?

1 Answers1