Форум

SKLNSK · #1 (**permalink**) 29.05.2015, 13:09

Как сделать чтобы click вызывался только на верхнем элементе?
Смотрим пример!

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 body{
   height: 150px;
   background-color: #FFCC66;
 }

  </style>
  <script src="http://code.jquery.com/jquery-2.1.4.js"></script>
</head>

<body>

<div id=id0 class=myclass>
	<div id=id1 class=myclass>
		<br>
		1111111111<br>
	</div>
	<div id=id2 class=myclass>
		<br>22222222222<br>
	</div>
	<br>Какой-то текст<br>
</div>

<script>

	$('.myclass').click(function(){
		alert('id= '+$(this).attr('id'));
	});
	
</script>

</body>
</html>

KosBeg · #2 (**permalink**) 29.05.2015, 13:16

в теории нужно добавить к селектору псевдоклас :first-child (если не ошибаюсь)

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 body{
   height: 150px;
   background-color: #FFCC66;
 }

  </style>
  <script src="http://code.jquery.com/jquery-2.1.4.js"></script>
</head>

<body>

<div id=id0>
	<div id=id1 class=myclass>
		<br>
		1111111111<br>
	</div>
	<div id=id2 class=myclass>
		<br>22222222222<br>
	</div>
	<br>Какой-то текст<br>
</div>

<script>

	$('.myclass:first-child').click(function(){
		alert('id= '+$(this).attr('id'));
	});
	
</script>

</body>
</html>

PS: я проверил, не только в теории, но и на практике тоже

SKLNSK · #3 (**permalink**) 29.05.2015, 13:25

На практике в вашем примере click вызывается только для id1, к сожалению. А нужно чтобы для каждого, но только один раз вызывался и для всех div.

В моём примере еще простая структура, в рабочем документе там по 4-5 вложений, соответственно по 4-5 раз вызывается click.

рони · #4 (**permalink**) 29.05.2015, 13:27

SKLNSK,

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 body{
   height: 150px;
   background-color: #FFCC66;
 }

  </style>
  <script src="http://code.jquery.com/jquery-2.1.4.js"></script>
</head>

<body>

<div id=id0 class=myclass>
	<div id=id1 class=myclass>
		<br>
		1111111111<br>
	</div>
	<div id=id2 class=myclass>
		<br>22222222222<br>
	</div>
	<br>Какой-то текст<br>
</div>

<script>
	$('.myclass').click(function(){
	var ok = !$(this).parents('.myclass').length;
	    ok &&	alert('id= '+$(this).attr('id'));
	});

</script>

</body>
</html>

KosBeg · #5 (**permalink**) 29.05.2015, 13:29

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

<div id=id0 class=myclass>
<div id=id1 class=myclass>
<br>
1111111111<br>
</div>
<div id=id2 class=myclass>
<br>22222222222<br>
</div>
<br>Какой-то текст<br>
</div>

ошибка тут,
когда вы кликаете по любому елементу вы одновременно кликаете и по <div id=id0 class=myclass>, тоесть кликаете по елементу с класом myclass ДВАЖДЫ, я в своем примере выправил эту ошибку

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 body{
   height: 150px;
   background-color: #FFCC66;
 }

  </style>
  <script src="http://code.jquery.com/jquery-2.1.4.js"></script>
</head>

<body>

<div id=id0>
	<div id=id1 class=myclass>
		<br>
		1111111111<br>
	</div>
	<div id=id2 class=myclass>
		<br>22222222222<br>
	</div>
	<br>Какой-то текст<br>
</div>

<script>

	$('.myclass').click(function(){
		alert('id= '+$(this).attr('id'));
	});
	
</script>

</body>
</html>

SKLNSK · #6 (**permalink**) 29.05.2015, 13:40

Убрав из корневого элемента класс myclass теперь он не кликается.

Нужно, чтобы все DIV'ы кликались по одному алгоритму. Один обработчик чтобы на всех был.

рони · #7 (**permalink**) 29.05.2015, 13:46

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

Как сделать чтобы click вызывался только на верхнем элементе?

пост 4 не подошёл разве? или вам нужно всплытие отменить?

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 body{
   height: 150px;
   background-color: #FFCC66;
 }

  </style>
  <script src="http://code.jquery.com/jquery-2.1.4.js"></script>
</head>

<body>

<div id=id0 class=myclass>
	<div id=id1 class=myclass>
		<br>
		1111111111<br>
	</div>
	<div id=id2 class=myclass>
		<br>22222222222<br>
	</div>
	<br>Какой-то текст<br>
</div>

<script>
	$('.myclass').click(function(event){
        event.stopPropagation();
	    alert('id= '+$(this).attr('id'));
	});

</script>

</body>
</html>

SKLNSK · #8 (**permalink**) 29.05.2015, 13:49

Вставил в обработчик return false; Заработало!
Перелопатил кучу инета, сам догадался )

Вот пример:

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 body{
   height: 150px;
   background-color: #FFCC66;
 }

  </style>
  <script src="http://code.jquery.com/jquery-2.1.4.js"></script>
</head>

<body>

<div id=id0 class=myclass>
	<div id=id1 class=myclass>
		<br>
		1111111111<br>
	</div>
	<div id=id2 class=myclass>
		<br>22222222222<br>
	</div>
	<br>Какой-то текст<br>
</div>

<script>

	$('.myclass').bind('click',function(){
		alert('id= '+$(this).attr('id'));
		return false;
	});
	
</script>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript