componentFromPoint und Firefox
Martin aus Wien
- javascript
Hallo zusammen,
mit componentFromPoint kann ich feststellen, ob ein Maus-Event auf einem Scrollbar eines Elements stattgefunden hat. Aber nur in IE.
Hat jemand eine Idee, wie ich dasselbe im Firefox bewerkstelligen kann?
Gruß und Dank
Martin
Hallo,
mit componentFromPoint kann ich feststellen, ob ein Maus-Event auf einem Scrollbar eines Elements stattgefunden hat. Aber nur in IE.
Wenn Du sagst, wozu _genau_ Du das brauchst, gibt es eventuell eine Lösungsmöglichkeit, die ohne das Abfragen von Maus-Events auf den Scrollbars auskommt.
Hat jemand eine Idee, wie ich dasselbe im Firefox bewerkstelligen kann?
Nein, dasselbe kann man mit FireFox nicht bewerkstelligen. Man kann versuchen, zumindest herauszubekommen, ob der Maus-Event einen Scrollbar als Ziel hatte, aber an die einzelnen Teile des Scrollbars, wie bei MSIE-Element.componentFromPoint, kommt man nicht heran.
Kurzes Beispiel zur weiteren Diskussion:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Beschreibung der Seite</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
h1 { width:500px; height:400px; background-color:#FF0; }
#scrollDiv { width:300px; height:50px; overflow:auto; background-color:#FF0; }
</style>
<script type="text/javascript">
<!--
function trackElement(e, mouseMoveElem){
if(!e) e = window.event;
var sElem = "";
if(typeof mouseMoveElem.componentFromPoint != "undefined") {
sElem = mouseMoveElem.componentFromPoint(
e.clientX,
e.clientY
);
} else if (typeof e.target != "undefined" && typeof e.pageX != "undefined") {
sElem = e.target;
if (sElem == mouseMoveElem) {
if (typeof sElem.scrollHeight != "undefined" && typeof sElem.clientHeight != "undefined" && typeof e.pageX != "undefined") {
//Das Element muss direkt im Body stehen, sein offsetParent darf also nicht noch einen offsetParent mit einem offsetLeft/-Top haben.
if (sElem.scrollHeight > sElem.clientHeight && e.pageX-sElem.offsetLeft > sElem.clientWidth) {
sElem += "rechteVertikaleScrollbar";
} else if (sElem.scrollWidth > sElem.clientWidth && e.pageY-sElem.offsetTop > sElem.clientHeight) {
sElem += "untereHorizontaleScrollbar";
}
}
}
}
document.getElementById("monitor").innerHTML = "mousemove " + e.clientX + ", "
+ e.clientY +
" The mouse pointer is hovering over: " + sElem;
if (typeof e.stopPropagation != "undefined") e.stopPropagation();
if (e.cancelBubble == false) e.cancelBubble = true;
}
window.onload = function() {
document.documentElement.onmousemove = function(e){trackElement(e, this)};
document.getElementById("scrollDiv").onmousemove = function(e){trackElement(e, this)};
}
//-->
</script>
</head>
<body>
<div id="monitor"> </div>
<div id="scrollDiv">Test<br>TestTest<br>TestTest<br>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br>Test</div>
<h1>Test</h1>
</body>
</html>
Quellen zum Nachlesen für Mozilla:
http://developer.mozilla.org/en/docs/DOM:element
http://developer.mozilla.org/en/docs/DOM:event
viele Grüße
Axel
Hallo Axel,
erst Mal vielen Dank. Ich habe mich noch nicht in den Code vertieft (ist schon spät), nur das Beispiel getestet, aber das hilft ganz sicher weiter. Ich melde mich noch mal in diesem Thread.
Herzlichen Gruß und vielen Dank
Martin