Javascript 使div的一部分可单击

我遇到了一个弹出窗口的问题，当用户单击底层灰色区域（弹出窗口后面的区域）时，该窗口在可见时需要关闭，而在弹出窗口本身上则需要关闭

我有什么办法可以做到这一点吗

---

HTML JavaScript-jQuery 样本如下：

---

---

我曾尝试在div click上设置函数调用，但如果我单击popup content div，它将关闭popup。

在整个

.b-popup

中添加一个单击事件侦听器，但仅当事件目标与

.b-popup-content

元素不同时才关闭popup（编辑：或@BrettCaswell指出的其任何子元素），例如：

$('.b-popup').on('click', function(e){
    if( ! $(e.target).is('.b-popup-content, .b-popup-content *') ){
        PopUpHide();
    }

});

---

将单击事件侦听器添加到整个

.b-popup

中，但仅当事件目标与

.b-popup-content

元素不同时才关闭弹出窗口（编辑：或@BrettCaswell指出的其任何子元素），例如：

$('.b-popup').on('click', function(e){
    if( ! $(e.target).is('.b-popup-content, .b-popup-content *') ){
        PopUpHide();
    }

});

---

这应该行得通，对我来说行得通（德斯特罗伊提供）：

如果需要，您可能希望使用$（this）.offset（）、$（this）.width（）和$（this）.height（）使用单击的元素位置和大小。例如：

$('mydivselector').click(function(e) {
  if (e.pageY > $(this).offset().top + 0.5*$(this).height()) {
      // bottom was clicked

 } else {
      // up of the div was clicked

 }
});

---

如果要防止默认操作和事件传播，请从事件处理程序返回false。

这应该可以，它对我有效（由dystroy提供）：

如果需要，您可能希望使用$（this）.offset（）、$（this）.width（）和$（this）.height（）使用单击的元素位置和大小。例如：

$('mydivselector').click(function(e) {
  if (e.pageY > $(this).offset().top + 0.5*$(this).height()) {
      // bottom was clicked

 } else {
      // up of the div was clicked

 }
});

如果要防止默认操作和事件传播，请从事件处理程序返回false。

$（文档）.ready（函数（）{
PopUpHide（）；
$（“#popup1”）。单击（函数（e）{
如果（e.target！==此）返回；
PopUpHide（）；
});
});
函数PopUpShow（）
{
$（“#popup1”）.show（）；
}
函数PopUpHide（）
{
$（“#popup1”）.hide（）；
}

*{
字体系列：区域；
}
b.集装箱{
宽度：200px；
高度：150像素；
背景色：#ccc；
保证金：0px自动；
填充：10px；
字体大小：30px；
颜色：#fff；
}
.b-弹出窗口{
宽度：自动；
背景色：rgba（0,0,0,0.5）；
溢出：隐藏；
位置：固定；
顶部：0px；
底部：0px；
左：0；
右：0；
}
.b-弹出式内容{
保证金：3em自动0自动；
宽度：100px；
高度：40px；
填充：0.9em；
背景色：#C5C5；
边界半径：5px；
盒影：0.05厘米0.05厘米1米rgba（0,0,0,0.8）；
}

示例文本
弹出窗口中的文本

$（文档）.ready（函数（）{
PopUpHide（）；
$（“#popup1”）。单击（函数（e）{
如果（e.target！==此）返回；
PopUpHide（）；
});
});
函数PopUpShow（）
{
$（“#popup1”）.show（）；
}
函数PopUpHide（）
{
$（“#popup1”）.hide（）；
}

*{
字体系列：区域；
}
b.集装箱{
宽度：200px；
高度：150像素；
背景色：#ccc；
保证金：0px自动；
填充：10px；
字体大小：30px；
颜色：#fff；
}
.b-弹出窗口{
宽度：自动；
背景色：rgba（0,0,0,0.5）；
溢出：隐藏；
位置：固定；
顶部：0px；
底部：0px；
左：0；
右：0；
}
.b-弹出式内容{
保证金：3em自动0自动；
宽度：100px；
高度：40px；
填充：0.9em；
背景色：#C5C5；
边界半径：5px；
盒影：0.05厘米0.05厘米1米rgba（0,0,0,0.8）；
}

示例文本
弹出窗口中的文本
这里有一个替代方案，可以归结为
.addEventListener（，.bind（[,


原始答案
下面的示例更适合于重用和oop（ish）


这里有一个替代方案，可以归结为
.addEventListener（，.bind（[,


原始答案
下面的示例更适合于重用和oop（ish）


在浏览器中…html元素是最小的交互单元。因此…将任何html元素放在该位置。将处理程序绑定到该元素的点击事件。是“底层灰色区域”链接文本周围的弹出掩码或包装？@isherwood，否，如果单击“显示弹出”，弹出窗口将在深灰色背景上打开，浏览器中可能会出现重复…html元素是最小的交互单元。因此…将任何html元素放在该位置。将处理程序绑定到该元素的单击事件。是否“潜在的灰色区域"链接文本周围的弹出掩码或包装？@isherwood，不，如果你点击show popup，弹出窗口将在深灰色背景上打开。可能是@BrettCaswell的副本。你是对的，我只是在考虑OP代码的范围，而不是更一般的情况。修复了。pawel，是的，这很好。我删除了我之前的评论，因为它不正确ded有点粗糙..很抱歉。@BrettCaswell你是对的，我只是考虑OP代码的范围，而不是更一般的情况。Fixed.pawel，是的，很好去..我删除了我之前的评论，因为它听起来有点粗糙..很抱歉。如果不添加其他部分，就无法正确运行代码段..它会从你身上拿走你的东西我们的jQuery实现有一点，但它至少运行了..在不添加其他部分的情况下无法正确运行代码段..它从jQuery实现中删除了一点，但至少运行了..这很有趣，但它解决了一个完全不同的问题和顾虑..这个问题只是关于处理冒泡事件。这是int但它解决了一个完全不同的问题和担忧。这个问题只是关于处理冒泡事件。
$('mydivselector').click(function(e) {
  if (e.pageY > $(this).offset().top + 0.5*$(this).height()) {
      // bottom was clicked

 } else {
      // up of the div was clicked

 }
});

$(document).ready(function()
{
    $("#popup1").hide();
    $('.b-popup').on('click', function(targetId, e){
        console.log("%o %o %o", targetId, e.target.id, e);
        if( e.target.id !== targetId ){ return; }
        PopUpHide();
    }.bind(undefined, "popup1"));       
});


function PopUpShow(){
    $("#popup1").show();
}
function PopUpHide(){
    $("#popup1").hide();
}

/* I'm going to declare and keep my initialization code in an object. 
   that I'll run when the document is ready. 
*/
var MyHandlerManager = 
{     
    'elms' : [],
    'init': function()
    {            
        var CssSelector = "div.b-popup";
        var elms = document.querySelectorAll(CssSelector);
        for (var i = 0; i < elms.length; i++)
        {                
            elms[i].addEventListener('click', MyHandlers.HidePopupHandler.bind(undefined, elms[i].id));                
        }

        /* you can skip this. 
           You don't need to keep a reference to elms (NodeList) for the EventListeners to function properly.  
        */
        MyHandlerManager.elms = elms;
    }
};

var MyHandlers =
{
    "ShowPopupHandler": function (targetId, e)
    {
        console.log("targetId: %o :: e.target.id: %o :: EventArgs: %o", targetId, e.target.id, e);
        if (e.target.id !== targetId) { return; }

        var elm = document.getElementById(targetId);            
        elm.style.display = "block";
    },
    "HidePopupHandler": function (targetId, e) 
    {
        console.log("targetId: %o :: e.target.id: %o :: EventArgs: %o", targetId, e.target.id, e);
        if (e.target.id !== targetId) { return; }

        var elm = document.getElementById(targetId);            
        elm.style.display = "none";
     }
};

$(document).ready(function(){
    PopUpHide();
    MyHandlerManager.init();
    /* Again, you could just take the code in the init() function
       and run it here..
       using 'bind' to wrap the intended function and call it, passing the elm.id as an argument (first arg) into anonymous functions. 
    */
});

function PopUpShow(){
    $("#popup1").show();
}

function PopUpHide(){
    $("#popup1").hide();
}