За последние 24 часа нас посетили 19263 программиста и 1628 роботов. Сейчас ищут 1047 программистов ...

Координаты курсора в Firefox

Тема в разделе "JavaScript и AJAX", создана пользователем +Sten+, 14 фев 2008.

  1. +Sten+

    +Sten+ Активный пользователь

    С нами с:
    27 авг 2007
    Сообщения:
    978
    Симпатии:
    0
    Я не могу понять, как получить координаты курсора в Firefox. Скажем, есть некий элемент, наводя курсор на который, должен вылетать алерт с Х координатой мышки:
    Код (Text):
    1.  
    2. <script>
    3. function SetEvent(e)
    4. {
    5.   var x = e.pageX;
    6.   alert(x);
    7. }
    8. </script>
    9. <button onmousemove="SetEvent(this)">Раз</button>
    Да, я читал, что в файрфоксе нужно передавать обьект через параметр. Но, как видите по говнокоду выше, я нихрена не понял =). Нашел кучу примеров, где идёт проверка на браузер и в зависимости от этого ставится e.pageX или window.event.x, но ни 1 из этих примеров не работает в файрфоксе :). Может, кто-нибудь поможет и переделает функцию выше в нормальный вид?
     
  2. Ивашка

    Ивашка Активный пользователь

    С нами с:
    29 авг 2007
    Сообщения:
    96
    Симпатии:
    0
    Адрес:
    Щёкино/Тула
    Вот так:
    Код (Text):
    1. <script>
    2. function SetEvent(e)
    3. {
    4.   if(!e) e = window.event
    5.   var x = e.pageX || e.x
    6.   alert(x)
    7. }
    8. </script>
    9. <button onmousemove="SetEvent(event)">Раз</button>
    По коду: при установке обработчика объект event не существует в IE, поэтому в функции используем window.event.
    Также, в IE нет свойства pageX - используем просто x.
    this, при установке события внутри тега будет указывать на него, т.е. на button, а т.к. мы хотим получить координаты курсора, здесь он не нужен.

    А вообще, лучше написать/поставить нормальный eventmanager и не париться :)
     
  3. +Sten+

    +Sten+ Активный пользователь

    С нами с:
    27 авг 2007
    Сообщения:
    978
    Симпатии:
    0
    Ивашка
    Спасибо! теперь всё понятно.
     
  4. +Sten+

    +Sten+ Активный пользователь

    С нами с:
    27 авг 2007
    Сообщения:
    978
    Симпатии:
    0
    Еще 1 маленький вопросик, задам сдесь же.

    Данный код:
    Код (Text):
    1. var div = document.createElement("div");
    что делает? Создаёт элемент на странице? А что он из себя представляет? Его ведь не видно. Чтобы он стал виден, его нужно наполнить контентом?
    Код (Text):
    1.  div.innerHTML = 'Содержание';
    не работает.
     
  5. armadillo

    armadillo Активный пользователь

    С нами с:
    6 апр 2007
    Сообщения:
    2.380
    Симпатии:
    0
    Адрес:
    Russia, Moscow
    Намек:
    а где он находится после создания?
     
  6. +Sten+

    +Sten+ Активный пользователь

    С нами с:
    27 авг 2007
    Сообщения:
    978
    Симпатии:
    0
    Хочу сказать в объекте document, но не буду, так как это наверное глупость. Вобщем, не знаю ))
     
  7. Ивашка

    Ивашка Активный пользователь

    С нами с:
    29 авг 2007
    Сообщения:
    96
    Симпатии:
    0
    Адрес:
    Щёкино/Тула
    Подсказка №2: он находится в переменной div вне DOM-структуры.
    Добавление узла в DOM производится методом appendChild.
     
  8. +Sten+

    +Sten+ Активный пользователь

    С нами с:
    27 авг 2007
    Сообщения:
    978
    Симпатии:
    0
    Насколько я понял отсюда, созданный элемент должен "приютить" какой-либо реально-существующий в DOM объект?
    Код (Text):
    1. <script>
    2. function SetEvent()
    3. {
    4.  var main = document.getElementById('main'); //Это родительский элемент
    5.  main.appendChild(document.createElement('div')); //Он удочеряет созданный
    6.  main.div.innerHTML = 'Содержание';
    7. }
    8. </script>
    9. <body onload="SetEvent()">
    10. <div id="main"><div>
    На это браузеры ругаются матом. Наверно, я неправильно вызываю созданный элемент.
     
  9. armadillo

    armadillo Активный пользователь

    С нами с:
    6 апр 2007
    Сообщения:
    2.380
    Симпатии:
    0
    Адрес:
    Russia, Moscow
    матом ругаются люди, например когда от них требуют телепатить задаром. Программы ругаются с описанием ошибки.
    Попробуй создать объект, а только потом добавить его к имеющемуся.
    и не помешает добавить ему пару свойств, например id
    это по какому стандарту?
     
  10. +Sten+

    +Sten+ Активный пользователь

    С нами с:
    27 авг 2007
    Сообщения:
    978
    Симпатии:
    0
    Всем спасибо, разобрался:
    Код (Text):
    1. function SetEvent()
    2. {
    3.  var main = document.getElementById('main');
    4.  var child = document.createElement('div');
    5.  child.id = 'child';
    6.  main.appendChild(child);
    7.  document.getElementById('child').innerHTML = 'Содержание';
    8. }
     
  11. Ивашка

    Ивашка Активный пользователь

    С нами с:
    29 авг 2007
    Сообщения:
    96
    Симпатии:
    0
    Адрес:
    Щёкино/Тула
    можно и без id обойтись:
    Код (Text):
    1. child.innerHTML = 'Содержание';
    А если таким образом создается много элементов, то иногда даже нужно бывает.
     
  12. +Sten+

    +Sten+ Активный пользователь

    С нами с:
    27 авг 2007
    Сообщения:
    978
    Симпатии:
    0
    Я становлюсь новязчивым. Просто серьёзно начал изучать JS. По книгам всё узнать невозможно.

    1) Как присвоить некоторое событие всем элементам определённого типа, например, ссылкам? Нашел:
    Код (Text):
    1. elem.addEventListener(event, listener, capture)
    elem - тут нужно как-то задать все ссылки на странице, или дивы, не присваивая последним ИД или класс. Это возможно?

    2) И еще вопрос: есть ли в JS какая-либо функция-аналог in_array() в PHP. В обьекте Array такого метода не нашел. Неужели перебирать придется?
     
  13. AlexGousev

    AlexGousev Активный пользователь

    С нами с:
    25 мар 2006
    Сообщения:
    1.505
    Симпатии:
    0
    Адрес:
    Москва
    Выбрать необходимые элементы и добавить listener. Приведенный код работает для всех, кроме IE. Для IE нужно использовать attachEvent

    Если выбирать по названию тегов, то document.getElementsByName('a') выберет все теги <a>.

    Нет. Перебирать надо:
    [js]function in_array(arr, value) {
    for (var i in arr) {
    if (arr == value)
    return true;
    }
    return false;
    }[/js]
     
  14. Ивашка

    Ивашка Активный пользователь

    С нами с:
    29 авг 2007
    Сообщения:
    96
    Симпатии:
    0
    Адрес:
    Щёкино/Тула
    При использовании attachEvent не забудьте добавить приставку 'on' к имени события.
    По поводу in_array - в стандарте JS 1.6 от Mozilla есть метод indexOf для объектов Array, который почти идентичен функции array_search в php и, соответственно может использоваться для определения наличия элемента в массиве.
    Т.к. в Firefox этот метод относится к встроенным, мы получаем значительный прирост производительности при работе с большими массивами. Для "отсталых" браузеров используем такой вот хак:
    [js]if(!('indexOf' in Array.prototype) || !Array.prototype.indexOf.call)
    Array.prototype.indexOf = function(value, from) {
    var result = -1;
    for(var i=(from || 0),l=this.length; i<l; i++)
    if(this===value) {
    result = i;
    break;
    }
    return result;
    }[/js]
    Функция возващает индекс элемента в массиве, а при отсутствии оного -1 (а не false!).
    Если я не ошибаюсь, похожий подход используется в prototype.js
     
  15. +Sten+

    +Sten+ Активный пользователь

    С нами с:
    27 авг 2007
    Сообщения:
    978
    Симпатии:
    0
    AlexGousev
    Ивашка
    Отлично! Спасибо большое.

    Я сейчас дочитал В.Дунаев - "Самоучитель JavaScript". Там очень много не написано и примеры только для IE. Не посоветуете хороший офлайн справочник с описанием всех методов и прочего?
     
  16. Ивашка

    Ивашка Активный пользователь

    С нами с:
    29 авг 2007
    Сообщения:
    96
    Симпатии:
    0
    Адрес:
    Щёкино/Тула
    Про оффлайн-справочники ничего сказать не могу. Хороших и подробных скорее всего нет, т.к. реализации ядра меняются от версии к версии у каждого браузера. Новости и фичи можно узнать на сайтах разработчиков: firefox, opera, ie.
    Также можно почитать спецификацию. Удачи!
     
  17. +Sten+

    +Sten+ Активный пользователь

    С нами с:
    27 авг 2007
    Сообщения:
    978
    Симпатии:
    0
    Спасибо за ссылки.
    Угу. Щас сел писать "дурака" карточную игру. Скрипт уже может сдавать карты случайные. Вот уж терни скоро начнутся [​IMG]