تم استدعاء حدث DIV OnBlur عند النقر فوق مربع الاختيار داخل Div

StackOverflow https://stackoverflow.com/questions/1507648

  •  19-09-2019
  •  | 
  •  

سؤال

لدي منبثقة DIV وترغب في إخفاءها عند النقر فوق المستخدمين خارج Div. داخل div، لدي مربع اختيار ...

المشكلة هي أنه يتم إطلاق الحدث OnBlur Div عند محاولة النقر فوق مربع الاختيار. أنا وضعت رمز clugeneventbubble على OnClick من مربع الاختيار ولكن حرائق OnBlur قبل حدث خانة الاختيار OnClick ...

أي أفكار أو اقتراحات؟ هذا يبدو بسيطا جدا أن تفعل ولكن ليس بهذه البساطة ...

التحيات، ألبرت

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
<style type="text/css">
.popup
{
    display: none;
    position: relative;    
    border: solid 1px black;
    width: 100px;
    left: 100px;
    top: 100px;
}

.lookupButton
{
    width: 15px;
    height: 20px;
    background-color: blue;
}

.lookup
{
    border: solid 1px green;
}
</style>
<script language="javascript" type="text/javascript">
var popupVisible = false;

function cancelEventBubble(e) {
     if (!e) var e = window.event;
     e.cancelBubble = true;
     if (e.stopPropagation) e.stopPropagation();
}

function showPopup(obj)
{
    if (!popupVisible)
    {
        popupVisible = true;
        document.getElementById("popup").style.display = "block";
        document.getElementById("popup").focus();
    }
    else
    {
        popupVisible = false;
        document.getElementById("popup").style.display = "";
    }
}

function hidePopup()
{
    popupVisible = false;
    document.getElementById("popup").style.display = "";
}

function setTextValue(obj)
{
    var combo = document.getElementById("cbo1");
    if (combo.value.indexOf(obj.value) == -1)
    {
        combo.value += obj.value + "; ";
    }
    else
    {
        combo.value = combo.value.replace(obj.value + "; ", "");
    }
}

</script>
</head>
<body>
<table><tr><td>
    <input readonly="readonly" type="text" name="cbo1" id="cbo1" />
</td><td>
    <div class="lookupButton" onclick="showPopup(this);"></div>
</td></tr></table>

<div id="popup" class="popup" onblur="hidePopup()">
    <input id="chk0" type="checkbox" onclick="cancelEventBubble(event); setTextValue(this);" value="John" />John<br />
    <input id="chk1" type="checkbox" onclick="cancelEventBubble(event); setTextValue(this);" value="Jack" />Jack<br />
    <input id="chk2" type="checkbox" onclick="cancelEventBubble(event); setTextValue(this);" value="James" />James<br />
    <input id="chk3" type="checkbox" onclick="cancelEventBubble(event); setTextValue(this);" value="Richard" />Richard<br />
    <input id="chk4" type="checkbox" onclick="cancelEventBubble(event); setTextValue(this);" value="Tim" />Tim<br />
</div>
</body>
</html>
هل كانت مفيدة؟

المحلول

على المتصفحات الحديثة على طمس الحدث لا ينطلق div العناصر، نهج crossbrowser يمكن أن يتعامل أيضا مع قضايا IE يمكن أن يكون للاستخدام وفد الأحداث, ، ملزمة معالج الأحداث انقر على المستند، وإخفاء المنبثقة عندما يكون العنصر النقر هو خانة اختيار أو lookupButton, ، علي سبيل المثال:

document.onclick = function (e) { 
  e = e || window.event; 
  var element = e.target || e.srcElement; 

  if (element.tagName != "INPUT" && element.type != "checkbox" &&
      element.className != "lookupButton") { 
    hidePopup(); 
  } 
};

تحقق من المثال أعلاه مع بقية التعليمات البرمجية هنا.

نصائح أخرى

حاول الذهاب عن ذلك في الاتجاه الآخر. استخدم نهج ثلاثي الطبقات حيث تكون الطبقة السفلية الصفحة العادية، الطبقة العليا هي DIV المنبثقة الخاصة بك، والطبقة الوسطى هي DIV شفافة ملء الشاشة onfocus الحدث الذي يغلق المنبثقة الخاصة بك (بدلا من استخدام onblur).

إذا قمت بتوفير بعض الكود، فسيكون من الأسهل المساعدة في نهجك.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top