Выход курсора из элемента через его удаление

@53ifbb · Регистрация: 01.03.2016

Студворк — интернет-сервис помощи студентам

Прошу вас накидать мне чутка кода. Есть события mouseenter; mousemove; mouseout; на конкретном элементе. Нужно выполнить тоже самое, что в mouseout, но при удаление этого элемента.
Что то не соображу, ковыряю setInterval...(

@Lazy_Den · 11.01.2019, 23:08

Сообщение от 53ifbb

Нужно выполнить тоже самое

Что-то страшное? Просто вы не указали, что именно нужно выполнить.
Попробую ванговать...

JavaScript
1
2
3
4
5
function foo(){
    // код, выполняющийся при событии mouseout
}
 
$('element').on('mouseout', foo);

Теперь, при удалении элемента, просто вызывайте функцию - foo()

Добавлено через 5 минут
Альтернативный вариант. Обратите внимание на комментарий

JavaScript
1
2
3
4
5
6
7
$('element').on('mouseout', function(){
    // код, выполняющийся при событии mouseout
});
 
 
// После удаления элемента, если удаляемый !== element, триггер события
$('element').trigger('mouseout');

@53ifbb · 12.01.2019, 00:07 **[ТС]**

Lazy_Den, как раз таки удаляемый он и есть, а вообще может быть и контейнер и вообще все что угодно.
Мышка вошла в элемент и что то где то добавила на страницы. Мышка покинула элемент и все действия отменились.
И вот "мышка покинула" должно работать когда она покинула, т.е. элемент удалился неожиданно...

Плохая ванга с тебя)) я говорю о tooltip

Добавлено через 41 секунду
Lazy_Den, а речь идет о например кнопочке "Закрыть" ))

Добавлено через 3 минуты
Lazy_Den, я предполагаю, что при заходе в элемент нужно запускать интервал на отслеживание... Но у меня не получилось написать, почему то )))

@Lazy_Den · 12.01.2019, 00:08

Сообщение от 53ifbb

Плохая ванга с тебя

С этим не поспоришь.

Сообщение от 53ifbb

я говорю о tooltip

Я уже заметил на SO. Для подсказок вы используете плагин? Думаю, что да. В таком случае, лично я, в первую очередь внимательно почитал документацию этого плагина. Только очень криворукий автор или с наплевательским отношением, не написал бы метод, который бы прятал tooltip

@53ifbb · 12.01.2019, 00:20 **[ТС]**

Lazy_Den, я ни чего не хочу использовать, они все перегружены жестко. Мне нужен малюсенький кусок кода.
Вот мой старт:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('[title]').each(function( i ){
        if($(this).attr("title") !== '' && $(this).attr("title") != 'undefined'){
            $('body').append('<div class="tooltip" id="tooltip_' + i + '"><p>' + $(this).attr('title') + '</p></div>');
            var tooltip = $('#tooltip_' + i);
            var el = $(this);
            el.removeAttr("title");
            el.mouseenter(function(){
                tooltip.css({opacity:0.9, display:"none"}).fadeIn(30);
            }).mousemove(function( kmouse ){
                tooltip.css({left:kmouse.pageX + 15, top:kmouse.pageY + 25});
            }).mouseleave(function(){
                tooltip.fadeOut(10);
            });
        }
    });

А все плагины не учитывают мой вопрос, не учитывают ajax, не могут не выходить за экран с права, а jq ui вообще засоряет html с огромной скоростью до бесконечности))

@Lazy_Den · 12.01.2019, 00:22

Сообщение от 53ifbb

Вот мой старт

Тогда почему вы проигнорировали мой первый вариант в первом же ответе?

@53ifbb · 12.01.2019, 00:23 **[ТС]**

Lazy_Den, я думаю сделать событие hover и тогда с ajax все решено будет разом... Но самое главное это в заголовке темы)) Нужно решить к утру

@Lazy_Den · 12.01.2019, 00:24

И где тот кусок кода, в котором элемент удаляется?

@53ifbb · 12.01.2019, 00:26 **[ТС]**

Сообщение от Lazy_Den

Тогда почему вы проигнорировали мой первый вариант в первом же ответе?

JavaScript
1
$('element').trigger('mouseout');

как это выполниться, если $('element').lenght = 0 ?

Добавлено через 1 минуту

Сообщение от Lazy_Den

И где тот кусок кода, в котором элемент удаляется?

А tooltip не должен зависеть от других скриптов которые вешают такие события. Я же написал выше, что элемент пропал неожиданно/внезапно. А так бы я уже написал скрипт)))

@Lazy_Den · 12.01.2019, 01:22

Сообщение от 53ifbb

$('element').trigger('mouseout');

Первый вариант, а не альтернативный. Впрочем, не важно...

Сообщение от 53ifbb

пропал неожиданно/внезапно

В программирование такого не существует, причем в любом языке программирования.
Давайте так - вы сделаете пусть проблемный, но работающий пример в песочнице, например, jsfiddle.net, тогда избавимся от лишней воды в разговоре.

Добавлено через 1 минуту
Только пример с "внезапным" исчезновением элементов

Добавлено через 50 минут
53ifbb, Короче, т.к. сидеть всю ночь в ожидании у меня желания нет, да и завтра хотелось бы отдохнуть, вот вам наброски кода, который доработаете уже сами:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
(function($) {
  $.fn.tooltip = function() {
    var tooltip = $('<div class="tooltip"><p></p></div>').appendTo('body');
 
    var init = function() {
      var el = $(this);
      el.data('title', el.attr('title')).attr('title', '');
      el.on({
        mouseenter: function(e) {
          var $that = $(this);
          tooltip.find('p').text($that.data('title')).end()
            .css({
              top: $that.offset().top - 25,
              left: e.pageX - tooltip.width() / 2
            }).fadeIn(30);
        },
        mousemove: function(e) {
          tooltip.css('left', e.pageX - tooltip.width() / 2);
        },
        mouseleave: function() {
          tooltip.fadeOut(30);
        }
      });
    };
    return this.each(init);
  };
}(jQuery));

Подключение:

JavaScript
1
2
$('[title]').tooltip();
// как вы понимаете, селектор может быть любым и совсем не обязательно [title]

Так же набросал вам пример в песочнице. Последний элемент с атрибутом title - последний зеленый - "внезапно" исчезнет через 3сек.

HTML и CSS, которые использовал в песочнице

HTML5
1
2
3
4
5
6
<div title="Tooltip 1">Has tooltip.</div>
<div>No tooltip</div>
<div>No tooltip</div>
<div title="Tooltip 2">Has tooltip</div>
<div>No tooltip</div>
<div class="suddenly" title="Tooltip 3. Very long title text">Has tooltip. Keep the cursor home-based!</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.tooltip {
  display: none;
  position: absolute;
  padding: 2px 5px;
  background: #e4e4e4;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, .2);
  z-index: 10;
}
 
div:not(.tooltip) {
  margin: 20px;
  padding: 2px;
  border: 1px solid #999;
  color: #fff;
  background: #f00;
}
 
div[title] {
  background: #060;
}
 
.suddenly {
  font-weight: bold;
}

@53ifbb · 12.01.2019, 14:45 **[ТС]**

Lazy_Den, ваш код это тоже самое, что и мой(((
Выход курсора должен отслеживаться отдельно...

Lazy_Den, короче))) Вот код

HTML5
1
2
3
4
5
<div class="alert closer">
                <i class="close" title="Close">Х</i>
                successfully removed.
            </div>
<div class="tooltip shadow"></div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
(function(){
        var tooltip = $('.tooltip');
        $(document).find('[title]').hover(function(){
            tooltip.text($(this).attr('title')).fadeIn(200);
            $(this).removeAttr('title');
            var wwp = $(window).width();
            var hpw = $(window).height();
            var wtl = tooltip.outerWidth();
            var htl = tooltip.outerHeight();
            $(this).mousemove(function( kmouse ){
                var left = kmouse.pageX;
                var right;
                if((kmouse.pageX + wtl) > wwp)
                    left = wwp - wtl;
                if(left < 0)
                    left = 0;
                tooltip.css({left: left, top: kmouse.pageY + 25});
            });
        },
        function(){
            $(this).attr('title', tooltip.text()).unbind('mousemove');
            tooltip.text('').hide();
        });
    })();
  
  
// Скрытие сообщений
$(document).on('click', '.close', function(){
    $(this).closest('.closer').slideToggle(100, function(){
        var wrapper = $(this).closest('.alerts');
        $(this).remove();
        if(!wrapper.children('.closer').length)
            wrapper.remove();
    });
});

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
body{
  padding: 10px;
  background: #333;
}
.tooltip {
    display: none;
    position: absolute;
    padding: 4px 8px;
    background: #272727;
    font-size: 12px;
    opacity: .9;
    z-index: 999;
}
.alert{
    padding: 10px;
    border: 1px solid #cca933;
    background: rgba(204, 169, 51, .1);
    color: #cca933;
}
.alert .close{
    float: right;
    margin-left: 10px;
    cursor: pointer;
}
.shadow{
    -webkit-box-shadow: 0 5px 20px 2px rgba(0, 0, 0, .14), 0 6px 26px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 5px 20px 2px rgba(0, 0, 0, .14), 0 6px 26px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .4);
    box-shadow: 0 5px 20px 2px rgba(0, 0, 0, .14), 0 6px 26px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .4);
}

https://jsfiddle.net/53ifbb/9xL4ne1r который работает в Лисе, но я пользуюсь оперой и там не работает и в Хроме и вот оно где не до понимание наверно))

@Lazy_Den · 12.01.2019, 15:40

Не по теме:

Сообщение от 53ifbb

ваш код это тоже самое, что и мой

Хорошая шутка ))

Сообщение от 53ifbb

Вот код

Хотел было задать вопрос о том, зачем у вас работа с подсказками в одной области видимости, а удаление элементов в другой, но поберегу нервы

Добавьте $('.tooltip').hide(); где-нибудь в коллбеке slideToggle и будет вам счастье

@53ifbb · 12.01.2019, 16:03 **[ТС]**

Сообщение от Lazy_Den

Добавьте $('.tooltip').hide(); где-нибудь в коллбеке slideToggle и будет вам счастье

Мне нужны подсказки которые я смогу подключать в одно действие. Другие скрипты не должны учитывать их.
slideToggle это только тут, но может быть еще много чего от других...

Сообщение от Lazy_Den

зачем у вас работа с подсказками в одной области видимости, а удаление элементов в другой

не знаю)) многое не закончено... Рад советам по оптимизации, как надо ?) Но самое главное нужно учитывать ajax =)

@Lazy_Den · 12.01.2019, 16:33

Сообщение от 53ifbb

как надо ?

Вариант первый - найти хороший плагин, который будет соответствовать всем вашим требованиям. Вариант второй - изобретать колесо. Почему бы и нет? Только в этом случае, вам придётся пройти через все круги ада, которые окажутся у вас на пути )) Двигайтесь по шагам, а не пытайтесь охватить сразу все возможные варианты.
Над вашим кодом, уж простите, мне сидеть дискомфортно, поэтому, продолжая свой вариант, вот корректировка с учетом удаления элемента, в случае, когда применяется метод .remove():

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
(function($) {
    $.event.special.destroyed = {
        remove: function(o) {
            if (o.handler) {
                o.handler();
            }
        }
    };
 
    $.fn.tooltip = function() {
        var tooltip = $('<div class="tooltip shadow"><p></p></div>').appendTo('body');
        var init = function() {
            var el = $(this);
            el.data('title', el.attr('title')).attr('title', '');
            el.on({
                mouseenter: function(e) {
                    var $that = $(this);
                    tooltip.find('p').text($that.data('title')).end()
                        .css({
                            top: $that.offset().top - 50,
                            left: $that.offset().left + tooltip.width() / 2
                        }).fadeIn(30);
                },
                mousemove: function(e) {
                    tooltip.css('left', e.pageX - tooltip.width() / 2);
                },
                mouseleave: function() {
                    tooltip.fadeOut(30);
                },
                destroyed: function() {
                    tooltip.fadeOut(30);
                }
            });
        };
        return this.each(init);
    };
}(jQuery));
 
$('[title]').tooltip();

Кроме того, почитайте про "Слушателя" (MutationObserver), который в некоторых задачах просто незаменим

@53ifbb · 12.01.2019, 23:07 **[ТС]**

Lazy_Den, т.е. это когда удалилось событие. Я просто об этом не знал!! И все думал о сложных путях(
Вот за $.event.special очень благодарен.

Сообщение от Lazy_Den

"Слушателя" (MutationObserver)

Читал ранее вскользь, подумал это это все смутное дело... Посмотрим еще)

Добавлено через 3 часа 37 минут
Lazy_Den, С вашей помощью получилось сделать: Подсказки работают на DHTML, не выходят за пределы документа, работаю при фокусе (по центру снизу от тек. эл. или по центру с верху, если высота док. закончилась), подключение в одно действие.
Вот код, может кому нужно будет: https://jsfiddle.net/53ifbb/9xL4ne1r/9/

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
$(function(){
    $.event.special.jftooltip = {
        remove: function(o){
            if(o.handler)
                o.handler();
        }
    };
    var tooltip = $('#tooltip');
    var wdoc = $(document).outerWidth(true);
    var hdoc = $(document).outerHeight(true);
    $(document).on({
        focusin: function(){
            tooltip.text($(this).attr('title')).fadeIn(200);
            $(this).removeAttr('title');
            
            var _wel = $(this).outerWidth();
            var _hel = $(this).outerHeight();
            var _wtl = tooltip.outerWidth();
            var _htl = tooltip.outerHeight();
            
            var _left = $(this).offset().left;
            var _top = $(this).offset().top + _hel;
            
            if(_wel > _wtl)
                _left = (_wel - _wtl) / 2 + _left;
            else
                _left = _left - ((_wtl - _wel) / 2);
            if(wdoc < (_left + _wtl))
                _left = wdoc - _wtl;
            if(_left < 0)
                _left = 0;
            
            if((_top + _htl) > hdoc)
                _top = _top - _htl - _hel;
            if(_top < 0)
                _top = 0;
            
            tooltip.css({left: _left, top: _top});
            $(this).on({
                "focusout.tooltip": function(){
                    $(this).attr('title', tooltip.text()).off('focusout.tooltip').off('jftooltip');
                    tooltip.hide();
                },
                jftooltip: function(){
                    tooltip.hide();
                }
            });
        },
        mouseenter: function(){
            console.log(hdoc);
            tooltip.text($(this).attr('title')).fadeIn(200);
            $(this).removeAttr('title');
            var wtl = tooltip.outerWidth();
            var htl = tooltip.outerHeight();
            $(this).on({
                "mouseleave.tooltip": function(){
                    $(this).attr('title', tooltip.text()).off('mouseleave.tooltip').off('mousemove.tooltip').off('jftooltip');
                    tooltip.hide();
                },
                "mousemove.tooltip": function( kmouse ){
                    var left = kmouse.pageX;
                    if((left + wtl) > wdoc)
                        left = wdoc - wtl;
                    if(left < 0)
                        left = 0;
                    
                    var top = kmouse.pageY;
                    if((top + 25 + htl) > hdoc)
                        top = top - htl - 10;
                    else
                        top += 25
                    if(top < 0)
                        top = 0;
                    
                    tooltip.css({left: left, top: top});
                },
                jftooltip: function(){
                    tooltip.hide();
                }
            });
        }
    }, '[title]');
});

Добавлено через 3 минуты
п.с. тут есть не доделка: когда фокус на элементе, а мы перемещаем курсор на другой, то где фокус, там титул сотрется и пере запишется на наведенный))

@Lazy_Den · 12.01.2019, 23:50

53ifbb, один вопрос. Зачем постоянно "переливать" текст из title в tooltip и обратно?

@53ifbb · 13.01.2019, 00:11 **[ТС]**

Lazy_Den, там нужно чуть по другому хотя бы что бы избавиться от "конфликта" с focus.

@Lazy_Den · 13.01.2019, 00:24

Сообщение от 53ifbb

там нужно чуть по другому

Это я в курсе. А мой вариант вас не вдохновил? Один раз прогнать по всем элементам, переписав текст title в data-атрибут и всё. Дальше берем уже текст для tooltip из этого data-атрибута. И вот получаем: а) никаких багов; б) снижение ресурсозатрат - оптимизация.

@53ifbb · 13.01.2019, 01:29 **[ТС]**

Сообщение от Lazy_Den

А мой вариант вас не вдохновил? Один раз прогнать по всем элементам, переписав текст title в data-атрибут и всё.

Затратно))) У меня все на ajax, там в любом случае придется делать эти операции при каждом наведении в новых элементах.

JavaScript
1
2
$(this).attr('tooltip', $(this).attr('tooltip') || $(this).attr('title')).removeAttr('title');
tooltip.text($(this).attr('tooltip')).fadeIn(200);

@Lazy_Den · 13.01.2019, 04:41

Сообщение от 53ifbb

Затратно)))

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

Новые блоги и статьи Все статьи Все блоги /
Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .
Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .	Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .

@53ifbb 55 / 55 / 21 Регистрация: 01.03.2016 Сообщений: 594

	Выход курсора из элемента через его удаление 11.01.2019, 22:43. Показов 1880. Ответов 21 Метки нет (Все метки) Прошу вас накидать мне чутка кода. Есть события mouseenter; mousemove; mouseout; на конкретном элементе. Нужно выполнить тоже самое, что в mouseout, но при удаление этого элемента. Что то не соображу, ковыряю setInterval...( 0

@53ifbb 55 / 55 / 21 Регистрация: 01.03.2016 Сообщений: 594
	12.01.2019, 00:07 [ТС]
	Lazy_Den, как раз таки удаляемый он и есть, а вообще может быть и контейнер и вообще все что угодно. Мышка вошла в элемент и что то где то добавила на страницы. Мышка покинула элемент и все действия отменились. И вот "мышка покинула" должно работать когда она покинула, т.е. элемент удалился неожиданно... Плохая ванга с тебя)) я говорю о tooltip Добавлено через 41 секунду Lazy_Den, а речь идет о например кнопочке "Закрыть" )) Добавлено через 3 минуты Lazy_Den, я предполагаю, что при заходе в элемент нужно запускать интервал на отслеживание... Но у меня не получилось написать, почему то ))) 0

@53ifbb 55 / 55 / 21 Регистрация: 01.03.2016 Сообщений: 594
	12.01.2019, 00:23 [ТС]
	Lazy_Den, я думаю сделать событие hover и тогда с ajax все решено будет разом... Но самое главное это в заголовке темы)) Нужно решить к утру 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	12.01.2019, 00:24
	И где тот кусок кода, в котором элемент удаляется? 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	12.01.2019, 23:50
	53ifbb, один вопрос. Зачем постоянно "переливать" текст из title в tooltip и обратно? 0

@53ifbb 55 / 55 / 21 Регистрация: 01.03.2016 Сообщений: 594
	13.01.2019, 00:11 [ТС]
	Lazy_Den, там нужно чуть по другому хотя бы что бы избавиться от "конфликта" с focus. 0

Выход курсора из элемента через его удаление

Решение