jQuery 分离 div 元素内部和外部的 dblclick 事件答案

【问题标题】：jQuery separate dblclick events inside and outside of a div elementjQuery 分离 div 元素内部和外部的 dblclick 事件
【发布时间】：2013-10-04 16:18:50
【问题描述】：

我正在开发一个用于内容创建的本地站点，我想使用 javascript 的双击功能。

当用户在名称/ID 为 bigwrapper 或 bigwrapper2 的 div 外部双击时，我想旋转全屏背景图像。当用户单击#bigwrapper 或#bigwrapper2 时，我希望它为 .toggle();每个隐藏/显示一个或另一个。

这是我的更新代码（感谢 lordvlad）：

$(function() { 
 $( "#bigwrapper" ).draggable();  
 $( "#bigwrapper2" ).draggable(); 

 var SacramentoBG = ['nightcap.jpg','Tower_Bridge_Sacramento_edit.jpg'], 
     counter =0;            

 $('html').dblclick(function (event) {
    if (event.target.id != "bigwrapper" && event.target.id != "bigwrapper2") {
     counter = (counter+1) % SacramentoBG.length;
     $('html').css('background-image', "url("+SacramentoBG[counter]+")");
 } else {
     $("#bigwrapper").toggle();
     $("#bigwrapper2").toggle();    
 } 
 });
});

更新：下面在函数内添加“事件”的解决方案部分帮助，因为背景正确旋转，但是#bigwrappers 没有按预期切换（其他条件）。见：http://artfuladvection.com/project/NOAA/ndfdGraph/bloom.php想法？

谢谢！

【问题讨论】：

检查控制台，看看是否有任何错误！那里可能会有一些有趣的读物。
在这里工作正常...jsfiddle.net/SqRQ6你能复制吗
根据 lordvlad 的解决方案将“事件”添加到函数后不再出现控制台错误。 @PSL：见上面的网址。

标签： javascript jquery events dom

【解决方案1】：

这是因为 dblclick 函数不知道 event 变量。试试这个

$('html').dblclick(function (event) {

【讨论】：

谢谢！这有助于修复仅循环的背景，但#bigwrapper 根本不是 .toggle()'ing。想法？这是网址：artfuladvection.com/project/NOAA/ndfdGraph/bloom.php

【解决方案2】：

对我有用的完整答案是我需要停止排除特定的类名/ID，而是排除整个元素标签。或者，我可以只使用if (event.target.TagName == 'BODY') {}

 $('body').dblclick(function (event) {
     if (event.target.tagName != 'DIV' && event.target.tagName != 'IMG' && event.target.tagName != 'TABLE' && event.target.tagName != 'HR' && event.target.tagName != 'SMALL' ) {
       counter = (counter+1) % SacramentoBG.length;
       $('html').css('background-image', "url("+SacramentoBG[counter]+")");
     } else {
       $("#bigwrapper").toggle();
       $("#bigwrapper2").toggle();    
     } 
 });

【讨论】：