`
sophia_230
  • 浏览: 120629 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

关于点击任意处关闭某个控件的javascript的疑惑

阅读更多

最近在做项目时,发现一个奇怪的问题,就是如果某个页面有两个控件,比如日期控件和人员选择树控件,这两个控件都采用javascript中点击任意处关闭的事件,结果发现当两个控件都打开后,先关闭其中一个,后一个点击任意处将不能关闭。
 关闭树的代码如下:

 

 

//任意点击时,调用一个方法
document.onclick=doc_onclicks;
function doc_onclicks(){//当树控件展示时,关闭它

if (document.all.project_type_tree.style.display!="none"){
  with(window.event){
if(srcElement.tagName!='SPAN' && srcElement.tagName!='IMG')        {
        if(document.activeElement!=document.all.selectTypeByImg && srcElement.type!='checkbox'){
                     closeTree();
             }
         }
     }
    }
}

关闭日期控件的代码如下:

document.onclick = function(e) { //任意点击时关闭该控件 ,兼容了FF和IE

            e = window.event || e;
            var srcElement = e.srcElement || e.target;
            if(button!=null){
                if(srcElement != button && srcElement.getAttribute("extatt") == null){
                    showAllSelect();
                    dd.hide();
                }
            }else{
                if(srcElement != th && srcElement.getAttribute("extatt") == null){
                    showAllSelect();
                    dd.hide();
                }
            }
        }
        
    }

分析了代码,原因可能与document.onclick上注册的事件是同一个,即第一个控件触发了

关闭事件后,第二个控件调用的关闭事件仍然是前面的那个,所以无法关闭当前的控件。

 

解决办法:

其中一个控件重新注册事件:

代码如下:

 

 

document.body.attachEvent('onclick',doc_onclick);
function doc_onclick(){//当树控件展示时,关闭它

    if (document.all.project_type_tree.style.display!="none"){
     with(window.event){
         if(srcElement.tagName!='SPAN' && srcElement.tagName!='IMG'){
             if(document.activeElement!=document.all.selectTypeByImg && srcElement.type!='checkbox'){
                     closeTree();
             }
         }
     }
    }
}

分享到:
评论

相关推荐

    javascript树形结构控件

    JavaScript树形结构控件是一种常见的前端开发元素,用于在网页上呈现层次化的数据,比如文件系统、组织架构或导航菜单等。它通过节点的展开、折叠来模拟树状的层级关系,用户可以通过交互来探索和操作这些数据。下面...

    JavaScript树形菜单控件

    JavaScript树形菜单控件是一种常见的前端交互元素,用于在网页中展示层次结构的数据,比如网站导航、文件系统或组织架构等。"dTree"是其中一个流行的JavaScript库,它提供了创建可扩展、多级的树形菜单功能。在这个...

    页面所用到的日历控件:DatePicker

    在日历控件页面引用方式.txt中,可能包含了关于如何在网页中引入和使用DatePicker的详细步骤,包括HTML结构、CSS样式以及JavaScript代码。通常,这涉及到以下几个步骤: 1. **引入资源**:添加必要的CSS和...

    点击table任意列选中当前行demo

    "点击table任意列选中当前行demo"是一个典型的Web应用功能,它涉及到表格(Table)控件的自定义和事件处理,通常用于数据展示和操作。这个示例可能是为了实现用户在表格中通过点击某一列来选中整个行,以便进行...

    用javascript实现的非常好的日历控件

    本压缩包中提供的"非常好的日历控件"正是基于JavaScript实现的一个功能组件,旨在为用户提供美观且易于使用的日期选择界面。 首先,我们要理解JavaScript日历控件的基本工作原理。这种控件通常由HTML结构、CSS样式...

    史上最强JavaScript日历控件正式版(无偿的永久的提供给大家免费使用,含全部源代码)

    功能强大的JavaScript日历控件 最关键的,无偿的永久的提供给大家免费使用,含全部源代码。 功能简介: 一、更人性化,更全面的功能 大部分日期控件都具备这些功能,但是本日历控件做的更全面,更人性化,并且速度...

    西门子Wincc7.5教程 - 趋势控件应用之单条趋势切换

    例如,可以创建一个按钮,当用户点击时,通过脚本改变趋势控件的变量关联,实现显示不同变量的趋势。脚本语言通常是VBScript或JavaScript,它们允许用户自定义复杂的行为。 除了基本的单条趋势切换,WinCC7.5还支持...

    Slider鼠标点击 滑块移动

    当用户点击Slider的任意位置时,滑块应能响应并移动到点击的位置,以提供直观的交互体验。 首先,我们要了解Slider的基本结构。一个Slider通常由两个主要部分组成:滑块柄(Handle)和轨道(Track)。滑块柄代表...

    xytree javascript控件

    **XYTree JavaScript 控件详解** XYTree是一款基于JavaScript的交互式树形控件,它允许开发者在网页上创建和管理层次结构的数据展示。这个控件以其丰富的功能、良好的可定制性和用户友好的交互性,广泛应用于网站和...

    万年历控件

    jQuery万年历控件的设计目标是提供一个直观、用户友好的日期选择界面,允许用户快速浏览并选择任意年份、月份和日期。其核心功能通常包括: 1. **多语言支持**:通过配置文件或编程方式,可以轻松切换不同的语言...

    一个基于JavaScript实现的对Hyperlink control扩展创建 a Popup链接控件代码

    本篇文章将深入探讨如何通过JavaScript扩展`Hyperlink`控件,以实现一个更丰富的弹出窗口(Popup)效果。 首先,我们了解`Hyperlink`的基本结构。在HTML中,`<a>`标签用于创建超链接,其主要属性包括`href`(链接...

    梅花雪树控件(js版)2.0

    不同于传统的预先加载所有节点的方式,梅花雪树控件仅在用户展开某个节点时才加载相应的子节点,这大大减少了初次加载时的数据量,提高了页面响应速度,同时也降低了服务器的压力。对于数据量庞大的应用,这种按需...

    Webkit内核浏览器duilib控件

    6. **安全考虑**:由于Webkit浏览器控件会加载任意网页,因此需要关注安全问题,例如防止跨站脚本攻击(XSS)、内容注入等。 7. **自定义功能扩展**:根据需求,可能需要实现一些自定义功能,比如本地存储访问、视频...

    【百度地图】坐标标注控件

    2. **用户点击地图标注地图**:此功能允许用户在地图上点击任意位置进行标注。开发者可能使用了百度地图API的“点击事件监听”功能,当用户点击地图时,可以捕获到点击事件,并获取到相应的经纬度坐标。然后,这些...

    asp.net控件MultiView

    1. **视图(View)**:`MultiView`的核心组成部分,每个`View`都是一个独立的内容区域,可以包含任意的ASP.NET控件。通过编程或用户交互,可以切换显示哪个`View`。 2. **激活(Active View)**:`MultiView`中只有...

    JSP页面中的时间选择器

    * 在控件外任意点击一点可以关闭控件。 知识点四:控件的版本更新记录 控件经历了多次更新,更新记录如下: * Ver 2.0:使用 iframe 作为日历的载体,不再被 select 和 flash 等控件挡住;修正了移植到 iframe 后...

    javascript的日期空间源代码

    这使得JavaScript能处理任意时刻的日期,包括过去和未来。`getTime()`方法返回日期对象表示的毫秒数,`setTime()`方法接受一个毫秒值并更新日期对象。 当涉及到用户界面,特别是日期选择器控件时,JavaScript常常被...

    javascript日历

    它采用JavaScript语言编写,具有浮动特性,能够定位在页面的任意位置,并且用户可以通过点击来选取日期。这个日历的设计允许用户在不离开当前页面的情况下,快速设置或输入日期。 在实现这个JavaScript日历的过程中...

    Raphael之拖出控件连线控件

    Raphael 是一个强大的JavaScript库,专门用于在网页上创建矢量图形。这个库基于SVG(Scalable Vector Graphics)和VML(Vector Markup Language),使得开发者可以在任何支持这两种技术的浏览器上实现复杂的图形操作...

    程序天下:JavaScript实例自学手册

    1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用...

Global site tag (gtag.js) - Google Analytics