jQuery انقر فوق حدث العنصر

https://stackoverflow.com/questions/1423671

07-07-2019
|

سؤال

لدي قسم عائم يتم عرضه، وأريد أن يكون مخفيًا عندما ينقر المستخدم على القسم.سيكون هذا مشابهًا لاستدعاء الدالة ‎.hover()‎ عند تحريك الماوس فوق أحد العناصر.فقط أريد أن أفعل هذا من أجل النقر.

لقد حاولت فقط تعيين حدث نقر للنص، والذي من شأنه إخفاء القسم، لكن ذلك أعطى نتائج غير متوقعة.

هل لدى أي شخص أفكار حول كيف يمكنني القيام بذلك بسهولة؟

المحلول

وآخر، وربما أبسط والخيار سيكون لإضافة شعبة شفافة بين DIV العائمة وبقية الصفحة.

وحدث بضغطة واحدة على DIV شفافة يمكن التعامل مع الاختباء، وسيكون تجنب القضايا التي تواجه مع الحدث نقرة.

نصائح أخرى

إذا كنت تريد مسح شعبة عند النقر فوق أي مكان آخر في الصفحة، يمكنك أن تفعل شيئا مثل:

$('body').click(function(event) {
    if (!$(event.target).closest('#myDiv').length) {
        $('#myDiv').hide();
    };
});

إذا كنت تستخدم مسج، يمكنك استخدام محدد مثل:

$("*:not(#myDiv)").live("click", function(){
    $("#myDiv").hide();
});

وبالتأكيد كنت تبحث عن طمس الحدث؟

وأفضل طريقة للقيام بذلك هي: -

    
$(document).bind('click', function(e) {  

 var $clicked = $(e.target);

    if (!$clicked.parents().hasClass("divtohide")) {
        $(".divtohide").hide();
    }

});

وهذا عمل بالنسبة لي،

var mouseOver = false;
$("#divToHide").mouseover(function(){mouseOver=true;});
$("#divToHide").mouseout(function(){mouseOver=false;});
$("body").click(function(){
      if(mouseOver == false) {
           $("#divToHide").hide();
      }
});

والمثال النقر فوق عنصر الارتباط لعرض شعبة القائمة، يمكنك ببساطة ربط وظيفة طمس لربط عنصر لإخفاء شعبة القائمة

$('a#displaymenu').click(function(){
   $("#divName").toggle();
}).blur(function() {$("#divName").hide()})

وهذه هي وظيفة لمعالجة انقر خروج الحدث، وأنها تغذي محدد للتعداد، وعنصر مسج. ربما خدم أفضل على النحو المساعد مسج، ولكن هذا هو بسيط بما فيه الكفاية.

clickOut = function(selector, element) {
 var hide = function(event) {
  // Hide search options if clicked out
  if (!$(event.originalEvent.target).parents(selector).size())
   $(element).hide();
  else
   $(document).one("click",hide);
 };

 $(document).one("click", hide);
};

وحتى إذا كان لديك عنصر المنبثقة مثل <div class='popup'>test</div> يمكنك استخدام وظيفة لي مثل clickOut("div.popup", $("div.popup"));

     $('body').click(function (event) {        
if ($("#divID").is(':visible')) {
            $('#divID').slideUp();
        }
});

ويمكن استخدام هذا لمعرفة ما اذا كان شعبة مرئيا، إذا كان مرئيا، فإنه سيتم ثم حرك الكائن الأعلى.

وإليك نهج كامل يحركه الحدث

تتعامل الأحداث المخصصة مع "استدعاء" و"استبعاد" الطبقة حتى لا تتدخل في أحداث أخرى تعتمد على النقر
يستمع document.body إلى حدث الرفض فقط عندما تكون الطبقة المعنية مرئية بالفعل

كود زي:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(function()
{
  var $layer = $('#layer');
  var $body  = $('html');

  $layer
    .bind( 'summon', function( e )
    {
      $layer.show();
      $body.bind( 'click', dismissLayer );
    } )
    .bind( 'dismiss', function( e )
    {
      $layer.hide();
      $body.unbind( 'click', dismissLayer );
    } )
    .click( function( e )
    {
      e.stopPropagation();
    })
    .trigger( 'dismiss' )
  ;

  function dismissLayer( e )
  {
    $layer.trigger( 'dismiss' );
  }

  // This is optional - this just triggers the div to 'visible'
  $('#control').click( function( e )
  {
    var $layer = $('#layer:hidden');
    if ( $layer.length )
    {
      $layer.trigger( 'summon' );
      e.stopPropagation();
    }
  } );
});

</script>

<style type="text/css">
#layer {
  position: absolute;
  left: 100px;
  top: 20px;
  background-color: red;
  padding: 10px;
  color: white;
}
#control {
  cursor: pointer;
}
</style>

</head>
<body>

<div id="layer">test</div>
<span id="control">Show div</span>

</body>
</html>

أعرف الكثير من التعليمات البرمجية، ولكن هنا فقط لإظهار نهج مختلف.

ويمكنك أن تجرب هذا. http://benalman.com/projects/jquery-clickoutside-plugin/

<ع> استخدام معالج حدث على وثيقة يعمل بشكل جيد بالنسبة لي:

function popUp( element )
{
    element.onmousedown = function (event) { event.stopPropagation(); };
    document.onmousedown = function () { popDown( element ); };

    document.body.appendChild( element );
}

function popDown( element )
{
    document.body.removeChild( element );

    document.onmousedown = null;
}

ولقد وجدت الحل في منتدى ... ولكن لا أستطيع العثور عليه مرة أخرى لحساب المؤلف الاصلي. هنا هي النسخة (المعدلة التي تعيش في قانون بلدي).

 $(document).bind('mousedown.yourstuff', function(e) {
            var clicked=$(e.target); // get the element clicked                 
            if( clicked.is('#yourstuff')
                 || clicked.parents().is('#yourstuff')) {
                // click safe!
            } else {
                // outside click
                closeIt();
            }
        });

 function closeIt() {
        $(document).unbind('mousedown.emailSignin');
        //...
}

ولدي أيضا ESC الارتباطات keyup و"وثيق" أتش تي أم أل مرساة لا في الصورة أعلاه.

إذا كنت لا تريد إخفاء العنصر الذي سوف تظهر من خلال النقر نفسها:

var div_active, the_div;

the_div = $("#the-div");
div_active = false;

$("#show-the-div-button").click(function() {
  if (div_active) {
    the_div.fadeOut(function(){
      div_active = false;
    });
  } else {
    the_div.fadeIn(function(){
      div_active = true;
    });
  }
});

$("body").click(function() {
  if div_active {
    the_div.fadeOut();
    div_active = false;
  }
});

the_div.click(function() {
  return false;
});

وأنت تسير في حاجة لرصد الحدث mouseDown لصفحة كاملة، ولكن عليك أن تأخذ علما عندما يقوم المستخدم بالنقر داخل شعبة العائمة الخاصة بك.

وأود أن أقترح إضافة حدث تحوم لشعبة طرحت الخاص بك حتى عندما يقوم المستخدم تحوم فوقها، وتجاهل mouseDown، ولكن عندما لا يتم حلقت على مدى mouseDown أن إغلاقه

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow