Как сделать клик по td в таблице, который будет открывать div в этой ячейке, и при клике по div не закрывать его?

Question

[maksam07]

Снова же сложности правильно поставленного вопроса. Поэтому опишу более детально:
Есть таблица NxN, в каждой ячейке прописан скрытый div (эдакое меню для ячейки). Я сделал событие отображения этого DIV четко по центру экрана, но проблема в том, что при нажатии на этот самый DIV он же и закрывается.
Привожу код события:

var elTD = false;
$("#pField").on("click", "td", function() {
	var id = $(this).data("id");
	if ( $(this).find("div").is(":visible") ){
		elTD = false;
		$(this).find("div").hide();
	} else {
		elTD = $(this).find("div");
		var top = ( ($(window).height()/2) - (elTD.height())/2);
		var left = ( ($(window).width()/2) - (elTD.width()/2) );
		elTD.css({ "width": elTD.width(), 'top': top, 'left': left }).fadeIn();
		elTD.html( elTD.html()+'<br/>'+$(window).width()+'<br/>'+elTD.width()/2 );
	}
});

Таблица автоматически генерируется, поэтому проще показать исходник


Как сделать что бы по нажатию на DIV ничего не происходило?

Answer 1

[Артем Можаров]

надо сделать event.stopPropagation(); что бы предотвратить всплытие события. В разных браузерах всплытие происходит по разному либо на дочерние элементы либо на родительские. Так что по клику на div надо написать что то подобное

document.querySelector('td > div').addEventListener('click', function(event){
 event.stopPropagation();
 //event handler code here
})

Comments

[maksam07]

Впервые встречаю подобный код, можете чуть точнее объяснить куда его нужно вставлять и как с ним обращаться? и нельзя ли просто в моем коде что-то подправить (а не дописывать новое), что б на ДИВ событие игнорировалось?

[maksam07]

Дописал такое:
$("#pField").on("click", "td > div", function( e ) {
e.stopPropagation();
});
Вроде работает. Верно?

[Артем Можаров]

Максим Компаниец: да. написал e.stopPropagation(); вы предотвратили всплытие событий по DOM элементам. Если интересна тема всплытий https://learn.javascript.ru/event-bubbling .

[Артем Можаров]

Максим Компаниец: просто мой код написан на нативном js

[maksam07]

Артем Можаров: я в свою функцию, после: if ( $(this).find("div").is(":visible") ){
дописал: if (e.target !== this) return;
И теперь тоже по ДИВу не закрывается окно. Надеюсь ни где ошибок не допустил.

[Артем Можаров]

Максим Компаниец: =) отметь ответ правильным)

[maksam07]

Артем Можаров: все таки e.stopPropagation(); работает лучше, т.к. я в ДИВе сделал еще одно событие для закрытия этого ДИВа, оно срабатывало, но открывало ДИВ заново. Странная вообще система вышла. Вернул подобие вашего варианта и пока что все работает отлично.

Answer 2

[wscms]

Так не получится?

if ($(this).hasClass('popup')) return false;

Comments

[maksam07]

Получится, но теперь при клике на td div не закрывается.