පරිශීලකයා පිටත ක්ලික් කළ විට DIV සැඟවීමට jQuery භාවිතා කරන්න

මම මෙම කේතය භාවිතා කරමි:

$('body').click(function() {
   $('.form_wrapper').hide();
});

$('.form_wrapper').click(function(event){
   event.stopPropagation();
});

මේ HTML :

<div class="form_wrapper">
   <a class="agree" href="javascript:;">I Agree</a>
   <a class="disagree" href="javascript:;">Disagree</a>
</div>

ගැටළුව වන්නේ මා තුළ සබැඳි ඇති අතර divඒවා ක්ලික් කළ විට ඒවා තවදුරටත් ක්‍රියාත්මක නොවේ.

එකම ගැටලුවක් තිබුනේ නම්, මෙම පහසු විසඳුම ඉදිරිපත් කරන්න. එය පවා පුනරාවර්තන ලෙස ක්‍රියා කරයි:

$(document).mouseup(function(e) 
{
    var container = $("YOUR CONTAINER SELECTOR");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});

ඔබ මේ වගේ දෙයක් සමඟ යෑම හොඳය:

var mouse_is_inside = false;

$(document).ready(function()
{
    $('.form_content').hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    $("body").mouseup(function(){ 
        if(! mouse_is_inside) $('.form_wrapper').hide();
    });
});

මෙම කේතය මඟින් පිටුවේ ඇති ඕනෑම ක්ලික් සිදුවීමක් අනාවරණය කර ගන්නා #CONTAINERඅතර මූලද්‍රව්‍යය ක්ලික් කරන්නේ #CONTAINERමූලද්‍රව්‍යය හෝ එහි පැවත එන්නන් නොවේ නම් පමණි.

$(document).on('click', function (e) {
    if ($(e.target).closest("#CONTAINER").length === 0) {
        $("#CONTAINER").hide();
    }
});

StopPropagation මත විශ්වාසය තැබීම වෙනුවට ශරීරය සඳහා වෙඩි තබන ක්ලික් සිද්ධියේ ඉලක්කය පරීක්ෂා කිරීමට ඔබට අවශ්‍ය විය හැකිය.

වැනි දෙයක්:

$("body").click
(
  function(e)
  {
    if(e.target.className !== "form_wrapper")
    {
      $(".form_wrapper").hide();
    }
  }
);

එසේම, ශරීර අංගයට බ්‍රව්සරයේ පෙන්වා ඇති සම්පූර්ණ දෘශ්‍ය අවකාශය ඇතුළත් නොවිය හැකිය. ඔබගේ ක්ලික් කිරීම් ලියාපදිංචි නොවන බව ඔබ දුටුවහොත්, ඒ වෙනුවට HTML මූලද්‍රව්‍යය සඳහා ක්ලික් හෑන්ඩ්ලර් එක් කිරීමට ඔබට අවශ්‍ය විය හැකිය.

සජීවී ඩෙමෝ

චෙක් ක්ලික් ප්‍රදේශය ඉලක්කගත අංගයේ හෝ එහි දරුවා තුළ නොමැත

$(document).click(function (e) {
    if ($(e.target).parents(".dropdown").length === 0) {
        $(".dropdown").hide();
    }
});

යාවත්කාලීන කිරීම:

jQuery නැවතුම් ප්‍රචාරණය හොඳම විසඳුමයි

සජීවී ඩෙමෝ

$(".button").click(function(e){
    $(".dropdown").show();
     e.stopPropagation();
});

$(".dropdown").click(function(e){
    e.stopPropagation();
});

$(document).click(function(){
    $(".dropdown").hide();
});

$(document).click(function(event) {
    if ( !$(event.target).hasClass('form_wrapper')) {
         $(".form_wrapper").hide();
    }
});

විසඳුම යාවත්කාලීන කළේ:

• ඒ වෙනුවට mouseenter සහ mouseleave භාවිතා කරන්න
• හෝවර් භාවිතා කිරීම සජීවී සිදුවීම් බන්ධනය

var mouseOverActiveElement = false;

$('.active').live('mouseenter', function(){
    mouseOverActiveElement = true; 
}).live('mouseleave', function(){ 
    mouseOverActiveElement = false; 
});
$("html").click(function(){ 
    if (!mouseOverActiveElement) {
        console.log('clicked outside active element');
    }
});

වඩාත්ම ජනප්‍රිය පිළිතුර සඳහා jQuery නොමැතිව විසඳුමක් :

document.addEventListener('mouseup', function (e) {
    var container = document.getElementById('your container ID');

    if (!container.contains(e.target)) {
        container.style.display = 'none';
    }
}.bind(this));

MDN: https://developer.mozilla.org/en/docs/Web/API/Node/contains

ESCක්‍රියාකාරීත්වය සමඟ සජීවී නිරූපණය

ඩෙස්ක්ටොප් සහ ජංගම යන දෙඅංශයෙන්ම ක්‍රියා කරයි

var notH = 1,
    $pop = $('.form_wrapper').hover(function(){ notH^=1; });

$(document).on('mousedown keydown', function( e ){
  if(notH||e.which==27) $pop.hide();
});

_{යම් අවස්ථාවක දී ඔබ ලේඛනය මත ක්ලික් කරන විට ඔබේ මූලද්‍රව්‍යය සැබවින්ම දෘශ්‍යමාන වන බවට ඔබ සහතික විය යුතුය: if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();}

මේ වගේ දෙයක් වැඩ කරන්නේ නැද්ද?

$("body *").not(".form_wrapper").click(function() {

});

හෝ

$("body *:not(.form_wrapper)").click(function() {

});

සිනිඳු පවා:

$("html").click(function(){ 
    $(".wrapper:visible").hide();
});

එක් විශේෂිත අංගයක් සැඟවීමට DOM මත ඇති සෑම ක්ලික් කිරීමකටම ඇහුම්කන් දෙනවා වෙනුවට, ඔබට tabindexදෙමව්පියන්ට සකසා <div>සවන් දිය හැකියfocusout සිදුවීම් .

සැකසීමෙන් සිදුවීම වෙඩි තබා ඇති tabindexබවට සහතික blurවේ<div> (සාමාන්‍යයෙන් එය එසේ නොවේ).

එබැවින් ඔබේ HTML එක පෙනෙන්නේ:

<div class="form_wrapper" tabindex="0">
    <a class="agree" href="javascript:;">I Agree</a>
    <a class="disagree" href="javascript:;">Disagree</a>
</div>

සහ ඔබේ JS:

$('.form_wrapper').on('focusout', function(event){
    $('.form_wrapper').hide();
});

IPAD සහ IPHONE වැනි ස්පර්ශ උපාංග සඳහා අපට පහත කේතය භාවිතා කළ හැකිය

$(document).on('touchstart', function (event) {
var container = $("YOUR CONTAINER SELECTOR");

if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

මෙන්න මම වෙනත් ත්‍රෙඩ් එකක සොයාගත් jsfiddle, esc යතුර සමඟද ක්‍රියා කරයි: http://jsfiddle.net/S5ftb/404

    var button = $('#open')[0]
    var el     = $('#test')[0]

    $(button).on('click', function(e) {
      $(el).show()
      e.stopPropagation()
    })

    $(document).on('click', function(e) {
      if ($(e.target).closest(el).length === 0) {
        $(el).hide()
      }
    })

    $(document).on('keydown', function(e) {
      if (e.keyCode === 27) {
        $(el).hide()
      }
    })

Prc322 හි නියම පිළිතුරෙන් නිමවා ඇත.

function hideContainerOnMouseClickOut(selector, callback) {
  var args = Array.prototype.slice.call(arguments); // Save/convert arguments to array since we won't be able to access these within .on()
  $(document).on("mouseup.clickOFF touchend.clickOFF", function (e) {
    var container = $(selector);

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
      container.hide();
      $(document).off("mouseup.clickOFF touchend.clickOFF");
      if (callback) callback.apply(this, args);
    }
  });
}

මෙය කරුණු කිහිපයක් එකතු කරයි ...

1. "අසීමිත" ආරුක්කු සහිත ඇමතුමක් සහිත ශ්‍රිතයක් තුළ ස්ථානගත කර ඇත
2. Jquery හි .off () වෙත ඇමතුමක් එක් කරන ලදි, එය ක්‍රියාත්මක වූ පසු ලේඛනයෙන් එය ඉවත් කිරීම සඳහා සිදුවීම් නාම අවකාශයක් සමඟ යුගලනය වේ.
3. ජංගම ක්‍රියාකාරිත්වය සඳහා ස්පර්ශක ඇතුළත් වේ

මම හිතනවා මේක කෙනෙකුට උදව් කරයි කියලා!

ඔබට ios සමඟ ගැටළුවක් ඇත්නම්, ඇපල් උපාංගයේ මූසිකය ක්‍රියා නොකරයි.

jquery හි mousedown / mouseup අයිපෑඩ් සඳහා වැඩ කරයිද?

මම මෙය භාවිතා කරමි:

$(document).bind('touchend', function(e) {
        var container = $("YOURCONTAINER");

          if (container.has(e.target).length === 0)
          {
              container.hide();
          }
      });

(Prc322 හි පිළිතුරට එකතු කිරීම පමණි.)

මගේ නඩුවේදී මම මෙම කේතය භාවිතා කරන්නේ පරිශීලකයා සුදුසු ටැබ් එකක් ක්ලික් කළ විට දිස්වන සංචාලන මෙනුවක් සැඟවීමට ය. අමතර කොන්දේසියක් එක් කිරීම ප්‍රයෝජනවත් බව මට පෙනී ගියේය, කන්ටේනරයෙන් පිටත ක්ලික් කිරීමේ ඉලක්කය සබැඳියක් නොවන බව.

$(document).mouseup(function (e)
{
    var container = $("YOUR CONTAINER SELECTOR");

    if (!$("a").is(e.target) // if the target of the click isn't a link ...
        && !container.is(e.target) // ... or the container ...
        && container.has(e.target).length === 0) // ... or a descendant of the container
    {
        container.hide();
    }
});

මෙයට හේතුව මගේ වෙබ් අඩවියේ සමහර සබැඳි පිටුවට නව අන්තර්ගතයන් එක් කිරීමයි. සංචාලන මෙනුව අතුරුදහන් වන අවස්ථාවේදීම මෙම නව අන්තර්ගතය එකතු කළ හොත් එය පරිශීලකයාට ව්‍යාකූල විය හැකිය.

බොහෝ පිළිතුරු, එකක් එකතු කිරීමට ඡේදයේ අයිතියක් විය යුතුය ... මම වත්මන් (jQuery 3.1.1) පිළිතුරු දුටුවේ නැත - එබැවින්:

$(function() {
    $('body').on('mouseup', function() {
        $('#your-selector').hide();
    });
});

var n = 0;
$("#container").mouseenter(function() {
n = 0;

}).mouseleave(function() {
n = 1;
});

$("html").click(function(){ 
if (n == 1) {
alert("clickoutside");
}
});

 $('body').click(function(event) {
    if (!$(event.target).is('p'))
    {
        $("#e2ma-menu").hide();
    }
});

pයනු මූලද්‍රව්‍යයේ නමයි. කෙනෙකුට හැඳුනුම්පත හෝ පන්තිය හෝ මූලද්‍රව්‍ය නාමය ද සමත් විය හැකිය.

ඔබ .form_wrapper මත ක්ලික් කළහොත් ව්‍යාජ ලෙස ආපසු යන්න:

$('body').click(function() {
  $('.form_wrapper').click(function(){
  return false
});
   $('.form_wrapper').hide();
});

//$('.form_wrapper').click(function(event){
//   event.stopPropagation();
//});

පෝරම එතීමෙන් පිටත ඉහළ මට්ටමේ අංග වෙත ක්ලික් කිරීමේ සිදුවීමක් අමුණන්න, උදාහරණයක් ලෙස:

$('#header, #content, #footer').click(function(){
    $('.form_wrapper').hide();
});

මෙය ස්පර්ශ උපාංගවල ද ක්‍රියා කරනු ඇත, ඔබගේ තේරීම් ලැයිස්තුවේ .form_wrapper හි දෙමාපියෙකු ඇතුළත් නොකිරීමට වග බලා ගන්න.

var exclude_div = $("#ExcludedDiv");;  
$(document).click(function(e){
   if( !exclude_div.is( e.target ) )  // if target div is not the one you want to exclude then add the class hidden
        $(".myDiv1").addClass("hidden");  

}); 

FIDDLE

Https://sdtuts.com/click-on-not-specified-element/ වෙතින් පිටපත් කරන ලදි

සජීවී නිරූපණය http://demos.sdtuts.com/click-on-specified-element

$(document).ready(function () {
    var is_specified_clicked;
    $(".specified_element").click(function () {
        is_specified_clicked = true;
        setTimeout(function () {
            is_specified_clicked = false;
        }, 200);
    })
    $("*").click(function () {
        if (is_specified_clicked == true) {
//WRITE CODE HERE FOR CLICKED ON OTHER ELEMENTS
            $(".event_result").text("you were clicked on specified element");
        } else {
//WRITE CODE HERE FOR SPECIFIED ELEMENT CLICKED
            $(".event_result").text("you were clicked not on specified element");
        }
    })
})

මම මේ වගේ දෙයක් කළා:

var close = true;

$(function () {

    $('body').click (function(){

        if(close){
            div.hide();
        }
        close = true;
    })


alleswasdenlayeronclicknichtschliessensoll.click( function () {   
        close = false;
    });

});

dojo.query(document.body).connect('mouseup',function (e)
{
    var obj = dojo.position(dojo.query('div#divselector')[0]);
    if (!((e.clientX > obj.x && e.clientX <(obj.x+obj.w)) && (e.clientY > obj.y && e.clientY <(obj.y+obj.h))) ){
        MyDive.Hide(id);
    }
});

මෙම කේතය භාවිතා කිරීමෙන් ඔබට අවශ්‍ය තරම් අයිතම සැඟවිය හැක

var boxArray = ["first element's id","second element's id","nth element's id"];
   window.addEventListener('mouseup', function(event){
   for(var i=0; i < boxArray.length; i++){
    var box = document.getElementById(boxArray[i]);
    if(event.target != box && event.target.parentNode != box){
        box.style.display = 'none';
    }
   }
})

ඔබට කළ හැක්කේ, ඩ්‍රොප් ඩවුන් එකෙන් පිටත යමක් ක්ලික් කළ හොත් එය ඩ්‍රොප් ඩවුන් සැඟවිය හැකි ලේඛනයක් මත ක්ලික් කිරීමකි, නමුත් ඩ්‍රොප් ඩවුන් එක ඇතුළත යමක් ක්ලික් කළහොත් එය සඟවන්නේ නැත, එබැවින් ඔබේ “පෙන්වන්න” සිද්ධිය (හෝ ස්ලයිඩවුන් හෝ වෙනත් ඕනෑම දෙයක්) පහත වැටීම පෙන්වයි)

    $('.form_wrapper').show(function(){

        $(document).bind('click', function (e) {
            var clicked = $(e.target);
            if (!clicked.parents().hasClass("class-of-dropdown-container")) {
                 $('.form_wrapper').hide();
            }
        });

    });

ඉන්පසු එය සැඟවී ඇති විට, ක්ලික් කිරීමේ සිද්ධිය බැඳ තබන්න

$(document).unbind('click');

මෙම ලේඛන අනුව , .blur()වඩා වැඩි කාලයක් වැඩ <input>ටැගය. උදාහරණයක් වශයෙන්:

$('.form_wrapper').blur(function(){
   $(this).hide();
});