VPF::removeEventListener - Форум программистов

bars80080

Дата 14.12.2009, 14:17 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

понравился ползунок здесь, который форму расширяет, а т.к. недолюбливаю библиотеки, написал своё:

Код


<html>
<body>
<style>
body { height: 100%; }
.area { width: 600px; }
.area textarea { width: 100%; height: 75px; }
.area div { width: 100%; height: 8px; background: #f8f8ee; cursor: n-resize; }
</style>
<script>
var dropNS = false;
var ua = navigator.userAgent.toLowerCase();
var isOpera = (ua.indexOf('opera')  > -1);
var isIE = (!isOpera && ua.indexOf('msie') > -1);
function ymouse(e) { if(isIE) { return event.clientY; } else { return e.pageY; }}
function getElementPosition(elemId, pos, ts) {
    if(ts) { var elem = elemId; }
    else { var elem = document.getElementById(elemId); }
    var w = elem.offsetWidth; var h = elem.offsetHeight;
    if(pos) { return {"width": w, "height":h}; }
    var l = 0, t = 0;
    while(elem) { l += elem.offsetLeft; t += elem.offsetTop; elem = elem.offsetParent; }
    return {"left":l, "top":t, "width": w, "height":h};
}
function startDrop(el, e) { 
    var bk = el.parentNode.getElementsByTagName('textarea'); if(!bk[0]) { return false; }
    bk[0].id = 'RND' + Math.floor(Math.random()*1000000);
    var p = getElementPosition(bk[0], true, true);
    dropNS = true; var dc = ymouse(e) - p.height;
    if(document.body.addEventListener) {
        document.body.addEventListener("mousemove", function(e){ dropENS(bk[0].id, e, dc) }, false);
        document.body.addEventListener("mouseup", function(){ endDrop() }, false);
    } else {
        document.body.attachEvent("onmousemove", function(e){ dropENS(bk[0].id, e, dc) });
        document.body.attachEvent("onmouseup", function(){ endDrop() });
    }
    return true;
}
function endDrop() { dropNS = false; 
    if(document.body.addEventListener) {
        document.body.removeEventListener("mousemove", function(e){ dropENS() }, false);
        document.body.removeEventListener("mouseup", function(){ endDrop() }, false);
    } else {
        document.body.detachEvent("onmousemove", function(e){ dropENS() });
        document.body.detachEvent("onmouseup", function(){ endDrop() });
    }
    document.body.focus();
    return true; }
function dropENS(el, e, dc) {
    if(!dropNS) { return false; }
    bk = document.getElementById(el); if(!bk) { return false; }
    var fy = ymouse(e) - dc;
    bk.style.height = fy + 'px';
    return true;
}
</script>

<div class="area"><textarea>{V}</textarea><div onmousedown="startDrop(this, event);"></div></div>

</body>
</html>

не так уж и сложно оказалось.

однако, возник вопрос. вот эта переменная в коде dropNS явно лишняя, если бы работали методы removeEventListener и detachEvent. но они не работают. (если убрать переменную, то листенеры останутся)

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

diadiavova

Дата 14.12.2009, 14:57 (ссылка)

(нет голосов)

Загрузка ...

Доктор Зло(диагност, настоящий, с лицензией и полномочиями)

Профиль
Группа: Модератор
Сообщений: 5821
Регистрация: 14.8.2008
Где: В Коньфпольте

Репутация: 11
Всего: 142

bars80080, а почему так не сделать

Код


document.body.onmousemove = null;

Или я что-то не так понял?

--------------------

Хочешь получить мудрый совет - читай подписи участников форумов.
Злой доктор Щасзаболит smile

bars80080

Дата 14.12.2009, 15:08 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

так, не работает так

diadiavova

Дата 14.12.2009, 15:11 (ссылка)

(нет голосов)

Загрузка ...

Доктор Зло(диагност, настоящий, с лицензией и полномочиями)

Профиль
Группа: Модератор
Сообщений: 5821
Регистрация: 14.8.2008
Где: В Коньфпольте

Репутация: 11
Всего: 142

Цитата(bars80080 @ 14.12.2009, 15:08

)

так, не работает так

Странно, возможно это зависит от того, как на события подписываешься.Сейчас попробую чонить наваять.

Добавлено через 11 минут и 7 секунд
Ну вот в примере всё работает

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title></title>
</head>
<body>
    <input type="button" id="b1" value="b1" onclick="alert(this.id);" />
    <input type="button" id="b2" value="b2" />
<input type="button" id="btnRemoveHandler" value="Remove handler" onclick="RemoveEventHandlers();" />
    <script type="text/javascript">
        var b1 = document.getElementById("b1");
        var b2 = document.getElementById("b2");
        b2.onclick = function() { alert("Preved"); }
        function RemoveEventHandlers()
        {
            b1.onclick = null;
            b2.onclick = null;
        }
    </script>

</body>
</html>

--------------------

Хочешь получить мудрый совет - читай подписи участников форумов.
Злой доктор Щасзаболит smile

bars80080

Дата 14.12.2009, 15:30 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

ну, пример, примеру рознь.

хендлеры навешиваются автоматом и именно через addListener и attachEvent, т.к. нужно событие event, а прописать в разметке заранее нельзя, они навешиваются потом

то бишь разделяем html и js

diadiavova

Дата 14.12.2009, 15:39 (ссылка)

(нет голосов)

Загрузка ...

Доктор Зло(диагност, настоящий, с лицензией и полномочиями)

Профиль
Группа: Модератор
Сообщений: 5821
Регистрация: 14.8.2008
Где: В Коньфпольте

Репутация: 11
Всего: 142

bars80080, на счёт навешивания вышеозначенными методами не знаю, надо пробовать, но в моём примере если ты обратил внимание, первой кнопке обработчик приписывается в html-коде, а второй из скрипта. И кстати в в лисе в осле работает один и тот же код.

Добавлено через 31 секунду
На 13-ю строку обрати внимание.

--------------------

Хочешь получить мудрый совет - читай подписи участников форумов.
Злой доктор Щасзаболит smile

Amphiluke

Дата 14.12.2009, 16:07 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112

bars80080, это бесполезно, ИМХО. Вот таким вот образом:

Цитата(bars80080)

Код


        document.body.removeEventListener("mousemove", function(e){ dropENS() }, false);
        document.body.removeEventListener("mouseup", function(){ endDrop() }, false);

вы не воспроизведете те «явные» (анонимные) обработчики, которые передали в метод addEventListener. Здесь это уже совершенно другие функции, не имеющие отношения к ранее зарегистрированным слушателям. Поэтому метод removeEventListener не дает эффекта — ему передали функцию, не являющуюся зарегистрированным слушателем.

Если вы не рассматриваете вариант с передачей функции в метод addEventListener «неявно», т.е. по ссылке на полноценную ранее подготовленную функцию-слушатель, то есть компромиссный вариант (но мне он не нравится):

Код


    if(document.body.addEventListener) {
        document.body.addEventListener("mousemove", f1 = function(e){ dropENS(bk[0].id, e, dc) }, false);
        document.body.addEventListener("mouseup", f2 = function(){ endDrop() }, false);
    } else {
        document.body.attachEvent("onmousemove", f1 = function(e){ dropENS(bk[0].id, e, dc) });
        document.body.attachEvent("onmouseup", f2 = function(){ endDrop() });
    }

Код


    if(document.body.addEventListener) {
        document.body.removeEventListener("mousemove", f1, false);
        document.body.removeEventListener("mouseup", f2, false);
    } else {
        document.body.detachEvent("onmousemove", f1);
        document.body.detachEvent("onmouseup", f2);
    }

где f1 и f2 — глобальные переменные.

P.S. Хотя, я думаю, лучше всего было бы не поскупиться и создать отдельную именованную функцию-слушатель и оперировать ею, а не анонимными функциями.

bars80080

Дата 14.12.2009, 16:29 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

Цитата(Amphiluke @ 14.12.2009, 15:07

)

где f1 и f2 — глобальные переменные.

тут какбэ попытка уйти от глобальной переменной. хотя, наверное, всё же нужно заворачивать всякие хвосты

Цитата(Amphiluke @ 14.12.2009, 15:07

)

Хотя, я думаю, лучше всего было бы не поскупиться и создать отдельную именованную функцию-слушатель и оперировать ею, а не анонимными функциями.

да я как бы не за идею борюсь. этот метод добавления слушателей здесь же мне кто-то (может и ты) и подсказали /до этого я ими вообще не пользовался/. если есть какой-то более цивильный механизм, я не прочь посмотреть. как говорится, сам бы пошёл, да не знаю куда

bars80080

Дата 14.12.2009, 16:46 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

Цитата(Amphiluke @ 14.12.2009, 15:07

)

Код


    if(document.body.addEventListener) {
        document.body.removeEventListener("mousemove", f1, false);
        document.body.removeEventListener("mouseup", f2, false);
    } else {
        document.body.detachEvent("onmousemove", f1);
        document.body.detachEvent("onmouseup", f2);
    }

нормальный вариант. покатит

Amphiluke

Дата 14.12.2009, 16:52 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112

Как обойтись без глобальных переменных, сразу не соображу, но, с другой стороны, их и не будет много. Только две (пользователь не может таскать сразу две textarea) Первая глобальная переменная — id объекта textarea, размеры которого меняются (если имеется несколько таких textarea), второй — координаты, где изначально была нажата кнопка мыши. И всё — не так уж и много, вроде. А если textarea одна, то и вообще остается только одна глобальная переменная (dc).

Код


<html>
<body>
<style>
body { height: 100%; }
.area { width: 600px; }
.area textarea { width: 100%; height: 75px; }
.area div { width: 100%; height: 8px; background: #f8f8ee; cursor: n-resize; }
</style>
<script>
var ua = navigator.userAgent.toLowerCase();
var isOpera = (ua.indexOf('opera')  > -1);
var isIE = (!isOpera && ua.indexOf('msie') > -1);
var dc, bkid;
function ymouse(e) { if(isIE) { return event.clientY; } else { return e.pageY; }}
function getElementPosition(elemId, pos, ts) {
    if(ts) { var elem = elemId; }
    else { var elem = document.getElementById(elemId); }
    var w = elem.offsetWidth; var h = elem.offsetHeight;
    if(pos) { return {"width": w, "height":h}; }
    var l = 0, t = 0;
    while(elem) { l += elem.offsetLeft; t += elem.offsetTop; elem = elem.offsetParent; }
    return {"left":l, "top":t, "width": w, "height":h};
}
function startDrop(el, e) { 
    var bk = el.parentNode.getElementsByTagName('textarea'); if(!bk[0]) { return false; }
    bk[0].id = 'RND' + Math.floor(Math.random()*1000000);
    bkid = bk[0].id;
    var p = getElementPosition(bk[0], true, true);
    dc = ymouse(e) - p.height;
    if(document.body.addEventListener) {
        document.body.addEventListener("mousemove", dropENS, false);
        document.body.addEventListener("mouseup", endDrop, false);
    } else {
        document.body.attachEvent("onmousemove", dropENS);
        document.body.attachEvent("onmouseup", endDrop);
    }
    return true;
}
function endDrop() {
    if(document.body.addEventListener) {
        document.body.removeEventListener("mousemove", dropENS, false);
        document.body.removeEventListener("mouseup", endDrop, false);
    } else {
        document.body.detachEvent("onmousemove", dropENS);
        document.body.detachEvent("onmouseup", endDrop);
    }
    document.body.focus();
    return true; }
function dropENS(e) {
    var ev = (e) ? e : event;
    bk = document.getElementById(bkid); if(!bk) { return true; }
    var fy = ymouse(ev) - dc;
    bk.style.height = fy + 'px';
    return true;
}
</script>

<div class="area"><textarea>{V}</textarea><div onMouseDown="startDrop(this, event);"></div></div>

</body>
</html>

bars80080

Дата 14.12.2009, 17:30 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

Цитата(Amphiluke @ 14.12.2009, 15:52

)

Первая глобальная переменная — id объекта textarea, размеры которого меняются (если имеется несколько таких textarea), второй — координаты, где изначально была нажата кнопка мыши

да, примерно как-то так и было, но как всегда не додумал. наверное, это более лучший вариант, т.к. если слишком быстро тягать ползунок в ИЕ то у одного поля, то у другого, иногда его чуть глючит. а в этом варианте без фатализма (в предыдущем иногда обработчик не успевал сняться, а функция уже переназначалась, из-за этого он прилипал к мыши намертво). теперь снимается.

в общем, как всегда большое спасибо

Это сообщение отредактировал(а) bars80080 - 14.12.2009, 17:42

diadiavova

Дата 14.12.2009, 21:59 (ссылка)

(нет голосов)

Загрузка ...

Доктор Зло(диагност, настоящий, с лицензией и полномочиями)

Профиль
Группа: Модератор
Сообщений: 5821
Регистрация: 14.8.2008
Где: В Коньфпольте

Репутация: 11
Всего: 142

Вот всё-таки есть у меня ощущение, что или я чего-то не догнал, или меня не поняли. Прочитал внимательнее первый пост и код...вот вариант, о котором говорил я

Код


<html>
<body>
<style>
body { height: 100%; }
.area { width: 600px; }
.area textarea { width: 100%; height: 75px; }
.area div { width: 100%; height: 8px; background: #f8f8ee; cursor: n-resize; }
</style>
<script type="text/javascript">
    function id(idText) { return document.getElementById(idText); }
    var body = document.body;
var ua = navigator.userAgent.toLowerCase();
var isOpera = (ua.indexOf('opera')  > -1);
var isIE = (!isOpera && ua.indexOf('msie') > -1);
function ymouse(e) { if(isIE) { return event.clientY; } else { return e.pageY; }}
function getElementPosition(elemId, pos, ts) {
    if(ts) { var elem = elemId; }
    else { var elem = id(elemId); }
    var w = elem.offsetWidth; var h = elem.offsetHeight;
    if(pos) { return {"width": w, "height":h}; }
    var l = 0, t = 0;
    while(elem) { l += elem.offsetLeft; t += elem.offsetTop; elem = elem.offsetParent; }
    return {"left":l, "top":t, "width": w, "height":h};
}
function startDrop(el, e) { 
    var bk = el.parentNode.getElementsByTagName('textarea'); if(!bk[0]) { return false; }
    bk[0].id = 'RND' + Math.floor(Math.random()*1000000);
    var p = getElementPosition(bk[0], true, true);
    var dc = ymouse(e) - p.height;
        body.onmousemove= function(e){ dropENS(bk[0].id, e, dc) }
        body.onmouseup= function(){ endDrop() }
    return true;
}
function endDrop() {
      body.onmousemove=body.onmouseup=null;
      body.focus();
      return true; }
function dropENS(el, e, dc) {
    bk = id(el); if(!bk) { return false; }
    var fy = ymouse(e) - dc;
    bk.style.height = fy + 'px';
    return true;
}
</script>
<div class="area"><textarea>{V}</textarea><div onmousedown="startDrop(this, event);"></div></div>
</body>
</html>

--------------------

Хочешь получить мудрый совет - читай подписи участников форумов.
Злой доктор Щасзаболит smile

bars80080

Дата 15.12.2009, 00:05 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

фиг знает, в последний раз у меня почему-то неудавалось передать event через такую запись

body.onmousemove= function(e){ dropENS(bk[0].id, e, dc) }

из-за этого и приходилось всякие addEventListener вешать

diadiavova

Дата 15.12.2009, 00:08 (ссылка)

(нет голосов)

Загрузка ...

Доктор Зло(диагност, настоящий, с лицензией и полномочиями)

Профиль
Группа: Модератор
Сообщений: 5821
Регистрация: 14.8.2008
Где: В Коньфпольте

Репутация: 11
Всего: 142

Цитата(bars80080 @ 15.12.2009, 00:05

)

фиг знает, в последний раз у меня почему-то неудавалось передать event через такую запись

Ну ты же знаешь как это бывает: где-нибудь запятую потерял или ещё что и кирдык. С яваскриптом это "как два пальца обоссать".

--------------------

Хочешь получить мудрый совет - читай подписи участников форумов.
Злой доктор Щасзаболит smile

bars80080

Дата 15.12.2009, 00:14 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

нет, там именно не получалось передать событие

вот, эта тема http://forum.vingrad.ru/index.php?showtopi...t&p=2020891

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »