jquery klik sekitar div untuk menyembunyikan div

Dalam pembangunan web, selalunya perlu melaksanakan fungsi menyembunyikan elemen apabila elemen lain diklik. Ini adalah perkara biasa apabila melaksanakan beberapa kesan interaktif. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk melaksanakan fungsi menyembunyikan div apabila mengklik di sekelilingnya.

Gunakan jQuery untuk mengendalikan acara

Untuk merealisasikan fungsi menyembunyikan div apabila mengklik di sekeliling div, kita perlu menggunakan fungsi pemprosesan acara jQuery. Dalam jQuery, pengikatan peristiwa boleh menggunakan kaedah .on() Contohnya, kod untuk mengikat peristiwa klik adalah seperti berikut:

$(document).on('click', function() {
  // 隐藏div的代码
});

Kod ini akan mengikat peristiwa klik pada keseluruhan dokumen peristiwa dicetuskan apabila mana-mana elemen diklik.

Tentukan div sasaran

Seterusnya, kita perlu tentukan div yang ingin kita sembunyikan. Artikel ini akan menganggap bahawa id div ini ialah "sasaran", dan kita boleh mendapatkannya menggunakan pemilih jQuery. Contohnya, kod untuk mendapatkan div ini adalah seperti berikut:

var targetDiv = $('#target');

Mengendalikan acara klik

Apabila peristiwa klik berlaku, kita perlu menyemak sama ada elemen yang diklik berada di sekeliling div sasaran, dan jika ya, jangan lakukan apa-apa Tindakan, jika tidak, menyembunyikan div sasaran. Untuk menentukan sama ada elemen yang diklik berada di sekitar div sasaran, kita perlu menggunakan sifat yang disediakan oleh objek acara jQuery, termasuk koordinat halaman, koordinat elemen dan saiz elemen.

Dapatkan kedudukan klik

Pertama, kita perlu mendapatkan kedudukan klik. Objek acara jQuery menyediakan koordinat halaman dan koordinat elemen Kita boleh menggunakan sifat pageX dan pageY untuk mendapatkan koordinat halaman, dan menggunakan kaedah offset() untuk mendapatkan koordinat elemen. Sebagai contoh, kod untuk mendapatkan kedudukan klik tetikus adalah seperti berikut:

$(document).on('click', function(e) {
  var mouseX = e.pageX;
  var mouseY = e.pageY;
});

Dapatkan kedudukan dan saiz div sasaran

Seterusnya, kita perlu mendapatkan kedudukan dan saiz sasaran div. Kita boleh menggunakan kaedah offset(), outerWidth(), dan outerHeight() untuk mendapatkan kedudukan dan saiz div sasaran. Contohnya, kod untuk mendapatkan div sasaran adalah seperti berikut:

var targetDiv = $('#target');
var targetX = targetDiv.offset().left;
var targetY = targetDiv.offset().top;
var targetWidth = targetDiv.outerWidth();
var targetHeight = targetDiv.outerHeight();

Tentukan sama ada klik berada di sekitar div sasaran

Dengan kedudukan klik dan kedudukan serta saiz div sasaran, kita boleh menentukan sama ada klik berada di sekitar div sasaran. Kaedah penghakiman ialah jika abscissa kedudukan klik tetikus berada di sebelah kiri atau kanan div sasaran, atau ordinat berada di atas atau di bawah div sasaran, klik dianggap berada di sekitar div sasaran. Sebagai contoh, kod untuk menentukan sama ada klik berada di sekeliling div sasaran adalah seperti berikut:

if (mouseX < targetX || mouseX > targetX + targetWidth || mouseY < targetY || mouseY > targetY + targetHeight) {
  // 点击在目标div周围，需要隐藏目标div
} else {
  // 点击在目标div内部或边缘，不需要隐藏目标div
}

Sembunyikan div sasaran

Akhir sekali, jika klik tidak berada di sekitar div sasaran, kita perlu untuk menyembunyikan div sasaran. Menyembunyikan elemen boleh dicapai menggunakan kaedah .hide(). Contohnya, kod untuk menyembunyikan div sasaran adalah seperti berikut:

targetDiv.hide();

Kod penuh

Akhir sekali, kami menyepadukan semua kod di atas bersama-sama dan mendapatkan kod lengkap seperti berikut:

$(document).on('click', function(e) {
  var targetDiv = $('#target');
  var targetX = targetDiv.offset().left;
  var targetY = targetDiv.offset().top;
  var targetWidth = targetDiv.outerWidth();
  var targetHeight = targetDiv.outerHeight();
  var mouseX = e.pageX;
  var mouseY = e.pageY;
  
  if (mouseX < targetX || mouseX > targetX + targetWidth || mouseY < targetY || mouseY > targetY + targetHeight) {
    targetDiv.hide();
  }
});

Klik div Ini boleh dicapai dengan menyembunyikan div di sekelilingnya.

Ringkasan

Artikel ini memperkenalkan kaedah menggunakan jQuery untuk menyembunyikan div di sekitar div boleh klik. Kunci untuk mencapai fungsi ini ialah menggunakan kaedah pengendalian peristiwa jQuery dan manipulasi DOM, dan menggunakan pemilih dan atribut jQuery untuk mendapatkan kedudukan dan saiz div sasaran. Kaedah ini boleh diperluaskan kepada elemen lain, seperti butang, tetingkap timbul, dsb., memberikan kesan interaktif yang baik untuk pembangunan web.

Atas ialah kandungan terperinci jquery klik sekitar div untuk menyembunyikan div. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!