JavaScript - Maus: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
 
(2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
−
== Mausrichtung - links oder rechts ==
+
== Mausposition ==
−
<pre>
+
http://stackoverflow.com/questions/3234256/find-mouse-position-relative-to-element
 +
 
 +
Sometimes, when you have nested elements, one of them with the event attached to it, it can be confusing to understand what your browser sees as the parent. Here, you can specify which parent.
 +
 
 +
You take the mouse position, and then subtract it from the parent element's offset position.
 +
<syntaxhighlight lang="javascript">
 +
var x = evt.pageX - $('#element').offset().left;
 +
var y = evt.pageY - $('#element').offset().top;
 +
</syntaxhighlight>
 +
If you're trying to get the mouse position on a page inside a scrolling pane:
 +
<syntaxhighlight lang="javascript">
 +
var x = (evt.pageX - $('#element').offset().left) + self.frame.scrollLeft();
 +
var y = (evt.pageY - $('#element').offset().top) + self.frame.scrollTop();
 +
</syntaxhighlight>
 +
Or the position relative to the page:
 +
<syntaxhighlight lang="javascript">
 +
var x = (evt.pageX - $('#element').offset().left) + $(window).scrollLeft();
 +
var y = (evt.pageY - $('#element').offset().top) + $(window).scrollTop();
 +
</syntaxhighlight>
 +
Note the following performance optimisation:
 +
<syntaxhighlight lang="javascript">
 +
var offset = $('#element').offset();
 +
// Then refer to
 +
var x = evt.pageX - offset.left;
 +
</syntaxhighlight>
 +
In this way, JQuery does not have to look up #element for each line.
 +
== Mausrichtung ==
 +
=== Mausrichtung - links oder rechts ===
 +
<syntaxhighlight lang="javascript">
 
var direction = "",
 
var direction = "",
 
     oldx = 0,
 
     oldx = 0,
Zeile 18: Zeile 46:
  
 
document.addEventListener('mousemove', mousemovemethod);
 
document.addEventListener('mousemove', mousemovemethod);
−
</pre>
+
</syntaxhighlight>
  
−
== Mausrichtung 2 ==
+
=== Mausrichtung 2 ===
−
<pre>
+
<syntaxhighlight lang="javascript">
 
var bodyElement = document.querySelector("body");
 
var bodyElement = document.querySelector("body");
 
bodyElement.addEventListener("mousemove", getMouseDirection, false);
 
bodyElement.addEventListener("mousemove", getMouseDirection, false);
Zeile 51: Zeile 79:
 
     console.log(xDirection + " " + yDirection);
 
     console.log(xDirection + " " + yDirection);
 
}
 
}
−
</pre>
+
</syntaxhighlight>
−
==Mausrichtung 3 - jQuery Plugin==
+
=== Mausrichtung 3 - jQuery Plugin ===
−
<pre>
+
<syntaxhighlight lang="javascript">
 
/**
 
/**
 
  * jQuery Mouse Direction Plugin
 
  * jQuery Mouse Direction Plugin
Zeile 101: Zeile 129:
 
     }
 
     }
 
})(jQuery);
 
})(jQuery);
−
</pre>
+
</syntaxhighlight>
 
Beispiel
 
Beispiel
−
<pre>
+
<syntaxhighlight lang="html5">
 
<!Doctype html>
 
<!Doctype html>
 
<head>
 
<head>
Zeile 133: Zeile 161:
 
</body>
 
</body>
 
</html>
 
</html>
−
</pre>
+
</syntaxhighlight>
  
−
Mausrichtung 4 - in Grad
+
=== Mausrichtung 4 - in Grad ===
 
http://stackoverflow.com/questions/22977862/calculating-angle-in-degrees-of-mouse-movement (2017-01)
 
http://stackoverflow.com/questions/22977862/calculating-angle-in-degrees-of-mouse-movement (2017-01)
−
<pre>
+
<syntaxhighlight lang="javascript">
 
$("canvas").mousemove(function(e) {                 
 
$("canvas").mousemove(function(e) {                 
 
             getDirection(e);
 
             getDirection(e);
Zeile 172: Zeile 200:
 
   return radians*(180/Math.PI);
 
   return radians*(180/Math.PI);
 
}
 
}
−
</pre>
+
</syntaxhighlight>

Aktuelle Version vom 21. Januar 2017, 12:07 Uhr

Mausposition[Bearbeiten]

http://stackoverflow.com/questions/3234256/find-mouse-position-relative-to-element

Sometimes, when you have nested elements, one of them with the event attached to it, it can be confusing to understand what your browser sees as the parent. Here, you can specify which parent.

You take the mouse position, and then subtract it from the parent element's offset position. 

var x = evt.pageX - $('#element').offset().left;
var y = evt.pageY - $('#element').offset().top;

If you're trying to get the mouse position on a page inside a scrolling pane: 

var x = (evt.pageX - $('#element').offset().left) + self.frame.scrollLeft();
var y = (evt.pageY - $('#element').offset().top) + self.frame.scrollTop();

Or the position relative to the page: 

var x = (evt.pageX - $('#element').offset().left) + $(window).scrollLeft();
var y = (evt.pageY - $('#element').offset().top) + $(window).scrollTop();

Note the following performance optimisation: 

var offset = $('#element').offset();
// Then refer to 
var x = evt.pageX - offset.left;

In this way, JQuery does not have to look up #element for each line.

Mausrichtung[Bearbeiten]

Mausrichtung - links oder rechts[Bearbeiten]

var direction = "",
    oldx = 0,
    mousemovemethod = function (e) {
    
        if (e.pageX < oldx) {
            direction = "left"
        } else if (e.pageX > oldx) {
            direction = "right"
        }
        
        document.body.innerHTML = direction;
        
        oldx = e.pageX;
        
}

document.addEventListener('mousemove', mousemovemethod);

Mausrichtung 2[Bearbeiten]

var bodyElement = document.querySelector("body");
bodyElement.addEventListener("mousemove", getMouseDirection, false);
 
var xDirection = "";
var yDirection = "";
 
var oldX = 0;
var oldY = 0;
 
function getMouseDirection(e) {
    //deal with the horizontal case
    if (oldX < e.pageX) {
        xDirection = "right";
    } else {
        xDirection = "left";
    }
 
    //deal with the vertical case
    if (oldY < e.pageY) {
        yDirection = "down";
    } else {
        yDirection = "up";
    }
 
    oldX = e.pageX;
    oldY = e.pageY;
 
    console.log(xDirection + " " + yDirection);
}

Mausrichtung 3 - jQuery Plugin[Bearbeiten]

/**
 * jQuery Mouse Direction Plugin
 * @version: 1.1
 * @author Hasin Hayder [hasin@leevio.com | http://hasin.me]
 */
(function ($) {
    var options = {};
    var oldx = 0;
    var oldy = 0;
    var direction="";
    $.mousedirection = function (opts) {
        var defaults = {
        };
        options = $.extend(defaults, opts);
        $(document).bind("mousemove", function (e) {
            var activeElement = e.target || e.srcElement;
            if (e.pageX > oldx && e.pageY > oldy) {
                direction="bottom-right";
            }
            else if (e.pageX > oldx && e.pageY < oldy) {
                direction="top-right";
            }
            else if (e.pageX < oldx && e.pageY < oldy) {
                direction="top-left";
            }
            else if (e.pageX < oldx && e.pageY > oldy) {
                direction="bottom-left";
            }
            else if (e.pageX > oldx && e.pageY == oldy) {
                direction="right";
            }
            else if (e.pageX == oldx && e.pageY > oldy) {
                direction="down";
            }
            else if (e.pageX == oldx && e.pageY < oldy) {
                direction="up";
            }
            else if (e.pageX < oldx && e.pageY == oldy) {
                direction="left";
            }
            $(activeElement).trigger(direction);
            $(activeElement).trigger({type:"mousedirection",direction:direction});
            oldx=e.pageX;
            oldy=e.pageY;
        });
    }
})(jQuery);

Beispiel 

<!Doctype html>
<head>
    <title>jQuery Mouse Direction Plugin Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript" charset="utf-8"></script>
    <script src="jquery.mousedirection.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        .container {
            height: 150px;
            margin: 20px;
            padding: 20px;
            width: 300px;
            border: 1px solid #888;
        }
    </style>
<body>
<div class="container">
    Move your mouse over this box
</div>
<script type='text/javascript'>
    $(function () {
        $.mousedirection();
        $(".container").bind("mousedirection", function (e) {
            $(this).html("Mouse Direction: <b>"+e.direction+"</b>");
        });
    });
</script>
</body>
</html>

Mausrichtung 4 - in Grad[Bearbeiten]

http://stackoverflow.com/questions/22977862/calculating-angle-in-degrees-of-mouse-movement (2017-01) 

$("canvas").mousemove(function(e) {                 
            getDirection(e);
            if (!set) {
                x1 = e.pageX, //set starting mouse x
                y1 = e.pageY, //set starting mouse y
                set = true;
            }   
            clearTimeout(thread);
            thread = setTimeout(callback.bind(this, e), 100);
        });

        function getAngle (x1, y1, x2, y2) {
            var distY = Math.abs(y2-y1); //opposite
            var distX = Math.abs(x2-x1); //adjacent
            var dist = Math.sqrt((distY*distY)+(distX*distX)); //hypotenuse, 
               //don't know if there is a built in JS function to do the square of a number
            var val = distY/dist;
            var aSine = Math.asin(val);
            return Math.degrees(aSine); //return angle in degrees
        }

        function callback(e) {
            x2 = e.pageX; //new X
            y2 = e.pageY; //new Y

            log("ANGLE: " + getAngle(x1, y1, x2, y2));
            log("mouse has stopped");   
            set = false;
        }

Math.degrees = function(radians)
{
  return radians*(180/Math.PI);
}
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=JavaScript_-_Maus&oldid=21950“