Получение позиции мыши в основных интернет-браузерах с помощью JavaScript - PullRequest
Новая
       15

Получение позиции мыши в основных интернет-браузерах с помощью JavaScript

3 голосов
/ 25 мая 2010

Я читал эту статью о создании всплывающих заметок с помощью JavaScript и CSS

Проблема в том, что этот работает только в IE, так как window.event не определен в Firefox. 

// assigns X,Y mouse coordinates to note element
note.style.left=event.clientX;
note.style.top=event.clientY;

Так не могли бы вы привести мне полностью рабочий пример? Или, по крайней мере, как я могу изменить код JavaScript, чтобы он работал в обоих интернет-браузерах?

Ответы [ 3 ]

4 голосов
/ 25 мая 2010

Существует более двух браузеров, но в большинстве из них должно работать следующее (адаптировано из функции на странице, на которую вы ссылаетесь): 

showNote = function(evt) {
    evt = evt || window.event;
    // gets note1 element
    var note1=document.getElementById('note1');
    // assigns X,Y mouse coordinates to 'note1' element
    note1.style.left=evt.clientX;
    note1.style.top=evt.clientY;
    // makes note1 element visible
    note1.style.visibility='visible';
};

Проблема в том, что не все браузеры имеют свойство event window и вместо этого используют объект события, неявно переданный в качестве параметра в функцию-обработчик события, такую ​​как showNote. Строка evt = evt || window.event; назначает window.event переменной evt, если в функцию не был передан параметр события (что происходит в Internet Explorer).

0 голосов
/ 12 апреля 2013

Я наконец-то нашел решение, но с использованием canvas.addEventListener вместо функции связывания onclick в атрибутах canvas. И это работает в IE, FF, Chrome. 

canvas.addEventListener('mousedown', ev_canvas, false);
function ev_mousedown(ev){
    var posx=0;posy=0;
    if (e.offsetX > 0) { // IE, Chrome
        posx = e.offsetX;
        posy = e.offsetY;
    } else{ // Firefox
        posx = e.layerX;
        posy = e.layerY;
    }
 } // This also works correctly while zoom!=100%

<div style="position: relative;">
    <canvas id="canvas" width="600" height="600" onClick="newClick()" style="position: relative;"></canvas>
</div>

См. Ссылку: http://dev.opera.com/articles/view/html5-canvas-painting/

Следующие коды не работают в Firefox. 

showNote = function(evt) {
    evt = evt || window.event;
    // gets note1 element
    var note1=document.getElementById('note1');
    // assigns X,Y mouse coordinates to 'note1' element
    note1.style.left=evt.clientX;
    note1.style.top=evt.clientY;
    // makes note1 element visible
    note1.style.visibility='visible'
}

Я использую Google для многих решений и ссылаюсь на относительно официальный сайт для браузеров: http://www.quirksmode.org/dom/w3c_cssom.html#mousepos

Но все еще не нашли решения в Firefox 20. У window.event нет определения в FF. Но хорошо работает в IE и Chrome.

Интересно, я что-то не так понял в этом пункте?

0 голосов
/ 25 мая 2010

Вы можете разделить две ветви при определении метода. Требуется больше персонажей, чем связывать их вместе, но вам не нужно проверять поддержку при каждом звонке.

// 

window.whereAt= (function(){
    var fun;
    if(typeof pageXOffset== 'number'){
        fun= function(e){
            var pX, pY, sX, sY;

            pX= e.clientX || 0;
            pY= e.clientY || 0;
            sX= window.pageXOffset;
            sY= window.pageYOffset;
            return [(pX+sX), (pY+sY)];
        }
    }
    else{
        fun= function(e){
            e= (e && e.clientX)? e: window.event;
            var pX, pY, sX, sY;

            pX= (e.clientX);
            pY= (e.clientY);
            var d= document.documentElement;
            var b= document.body;
            sX= Math.max(d.scrollLeft, b.scrollLeft);
            sY= Math.max(d.scrollTop, b.scrollTop);
            var pwot= [(pX+sX), (pY+sY)];
            return pwot;
        }
    }
    return fun;
})()
//test case
document.ondblclick= function(ev){
    alert(whereAt(ev))
};
...