javascript中的事件

我想在单击“修改”时打开一个表单。我还希望表单在单击表单外部时消失。当我使用mouseleave事件时，表单会自动打开和关闭，而我无法填写表单。我不知道在这里使用哪个事件

JS

HTML

修改搜索

您可以与目标元素进行比较，并检查是在表单外部还是在表单中单击。我到外面去，然后把表格藏起来

$(document).on('click', function(e){
var $target = $('.modify');
if($target.is($(e.target)) && !$trigger.has(e.target).length) {

  $('.modify').hide();
}

})

您可以与目标元素进行比较，并检查是在表单外部还是在表单中单击。我到外面去，然后把表格藏起来

$(document).on('click', function(e){
var $target = $('.modify');
if($target.is($(e.target)) && !$trigger.has(e.target).length) {

  $('.modify').hide();
}

})

---

mouseleave不会对单击做出反应，而是对当前指针位置做出反应。您必须在文档中添加一个click（mousedown）侦听器，以侦听外部的click事件。mouseleave不会对click作出反应，而是对当前指针位置作出反应。您必须在文档中添加一个click（mousedown）侦听器，以侦听外部的click事件。所有人都可以使用小提琴来帮助您

以下是一个可以帮助您的工作示例：

//打开表单
$（'.modify'）。在（'click'，函数（e）上{
$（this.parent（）.find（'.dialog'）.fadeIn（）；
});
//关闭窗体（窗体内的按钮）
$（'.close'）。在（'click'，函数（e）上{
$（this.parents（'.dialog'）.fadeOut（）；
});
//如果在窗体外部单击，则隐藏窗体
$（文档）.mouseup（函数（e）{
变量容器=$（“.dialog”）；
如果（！container.is（e.target）&&container.has（e.target）.length==0）{
container.hide（）；
}
});
ulli按钮{
显示：块；
}
.对话{
显示：无；
位置：绝对位置；
排名前10%；
底部：10%；
左：10%；
右：10%；
背景：蓝色；
}
.对话.关闭{
浮动：对；
颜色：白色；
}



修改搜索
试验
关上我
我是一个测试对话框

一把工作用的小提琴会更好地帮助你

以下是一个可以帮助您的工作示例：


//打开表单
$（'.modify'）。在（'click'，函数（e）上{
$（this.parent（）.find（'.dialog'）.fadeIn（）；
});
//关闭窗体（窗体内的按钮）
$（'.close'）。在（'click'，函数（e）上{
$（this.parents（'.dialog'）.fadeOut（）；
});
//如果在窗体外部单击，则隐藏窗体
$（文档）.mouseup（函数（e）{
变量容器=$（“.dialog”）；
如果（！container.is（e.target）&&container.has（e.target）.length==0）{
container.hide（）；
}
});
ulli按钮{
显示：块；
}
.对话{
显示：无；
位置：绝对位置；
排名前10%；
底部：10%；
左：10%；
右：10%；
背景：蓝色；
}
.对话.关闭{
浮动：对；
颜色：白色；
}



修改搜索
试验
关上我
我是一个测试对话框

代码的目的是什么$trigger.has（e.target）.length）
？@Roy_Dorsthorst它检查被单击的元素（
e.target
）是否不是trigger元素（
$target
）的后代@Alnitak右键，否则即使我们在内部单击，表单也将隐藏it@ShubhamKhatri您有一个bug-无法将DOM元素与jQuery对象进行比较（
$target！==e.target
）触发器.has（e.target）.length）的用途是什么？@Roy_Dorsthorst它检查单击的元素（
e.target
）是否不是触发器元素的后代（
$target
）@Alnitak正确否则表单将被隐藏，即使我们单击内部it@ShubhamKhatri您有一个bug-无法将DOM元素与jQuery对象进行比较（
$target！==e.target
）
$(document).on('click', function(e){
var $target = $('.modify');
if($target.is($(e.target)) && !$trigger.has(e.target).length) {

  $('.modify').hide();
}

})