JQuery yordamida ichki divga bir marta bosish voqeasini qanday aniqlash mumkin

Men uchun mobil menyuni yaratmoqchiman va ustki qismga bosish uchun funksiya qo'shmoqchiman.

Menyuga (binafsha qism) kelsa, uni yopishning hojati yo'q, lekin men ko'k bo'lakni bosganimda, uning yopilishi kerak.

Faqatgina binafsha qismga ega bo'lgan jQuery yozdim, lekin ko'k qismni bosganimda alert ko'rinmadi. Sinab ko'rish uchun JSFiddle bo'laman.

Va mening kodim shu

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('.outer-content .inner-content').on('click', function() {
  $(".outer-content .inner-content").data('clicked', 'yes');
  var isClicked = $('.outer-content').data('clicked');
  if (isClicked == 'yes') {
    alert("clicked the blue block");
  } else {
    alert("clicked the purple block");
  }
});
.outer-content {
  width: 100%;
  height: 200px;
  background: lightblue;
  position: relative;
}

.inner-content {
  width: 300px;
  background: purple;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="outer-content">
  <div class="inner-content"></div>
</div>
</div> </div>

0
qo'shib qo'ydi muallif Banzay, manba
Har ikkala kod yo'llarini qayta ishlashga hodisalarni ajratish uchun bir marta bosish hodisasi yo'qligini tavsiya qilaman. Moviy "yopish" kerak, ammo Binafsharang kelajakda boshqa narsalarni qilolmaydi. Men javobda misolni qo'shdim.
qo'shib qo'ydi muallif Nope, manba
qo'shib qo'ydi muallif Piyush Kumar Baliyan, manba

6 javoblar

Asosan javascriptda ikkita voqea modeli mavjud. Voqeani ta'qib qilish va hodisa sodir bo'lgan. Ichki divni bosganingizda, ichkaridagi div-ni bosing, keyin esa tashqi div tugmachasini bosing. hodisa yuzaga kelganda, birinchi navbatda, tashqi div voqiyasi ishdan chiqarildi va ichki div voqeasi ishdan chiqdi. Voqealar tarqalishini to'xtatish uchun, ushbu kodni klik usulingizda kiriting.

  e.stopPropagation();

JSFIDDLE

Sizning kodingiz:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('.outer-content').on('click', function(e) {
  alert("clicked the blue block");

});
$('.inner-content').on('click', function(e) {
  alert("clicked the purple block");
  e.stopPropagation();
});
.outer-content {
  width: 100%;
  height: 200px;
  background: lightblue;
  position: relative;
}

.inner-content {
  width: 300px;
  background: purple;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer-content">
  <div class="inner-content"></div>
</div>
</div> </div>

3
qo'shib qo'ydi

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('.outer-content').on('click', function(event) {
  if ($(event.target).hasClass('inner-content')) {
    alert("clicked the purple block");
  } else {
    alert("clicked the blue block");
  }
});
.outer-content {
  width: 100%;
  height: 200px;
  background: lightblue;
  position: relative;
}

.inner-content {
  width: 300px;
  background: purple;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="outer-content">
  <div class="inner-content"></div>
</div>
</div> </div>

2
qo'shib qo'ydi

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('.outer-content, div:not("inner-content")').on('click', function() {
  $(".inner-content").slideToggle();
});
.outer-content {
  width: 100%;
  height: 200px;
  background: lightblue;
  position: relative;
}

.inner-content {
  width: 300px;
  background: purple;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="outer-content">
  <div class="inner-content"></div>
</div>
</div> </div>

1
qo'shib qo'ydi

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('div').on('click', function(e) {
    e.preventDefault();
    e.stopImmediatePropagation()
  if($(e.target).is('.inner-content')){
  	alert("clicked the purple block");
  }else{
  	alert("clicked the blue block");
  }
});
.outer-content{
  width:100%;
  height:200px;
  background:lightblue;
  position:relative;
}

.inner-content{
  width:300px;
  background:purple;
  position:absolute;
  margin:auto;
  top:0;  bottom:0;  right:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer-content">
  <div class="inner-content"></div>
</div>
</div> </div>

1
qo'shib qo'ydi

Menga kelsa (binafsha qism), uni yopish kerak emas, lekin men   ko'k bo'lakka bosib, uni yopish uchun

kerak

Nima uchun to'g'ridan-to'g'ri ko'k elementni maqsad qilib olmaysiz va faqat quyida ko'rsatilganidek, har qanday kodni o'chirib qo'yishingiz mumkin.

Agar binafsha rang elementi bosilganda bajariladigan boshqa kod kerak bo'lsa, uni alohida-alohida bog'lang.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('.outer-content').on('click', function(e) {
  if (e.target == this) {
   //add "close" code here
    alert("will close");
  }
});

// You still can add code when clicking the purple element if needed...
$('.inner-content').on('click', function(e) {
  alert("I'm purple but separate code and will not close");
});
.outer-content {
  width: 100%;
  height: 200px;
  background: lightblue;
  position: relative;
}

.inner-content {
  width: 300px;
  background: purple;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="outer-content">
  <div class="inner-content"></div>
</div>
</div> </div>

1
qo'shib qo'ydi

Buni tashqi kontentda ustiga qo'shish orqali va event.target xususiyatidan foydalanib, bosilgan elementni tekshirish mumkin

$('.outer-content').on('click', function(e) {

  if( $(e.target).hasClass('outer-content')){
        alert("clicked the blue block");
  } else {
        alert("clicked the purple block");
  }
});

Bolaning elementidagi har qanday hodisaning qaynab ketishi tufayli yuqori elementga ham tarqaladi.

1
qo'shib qo'ydi
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb