jquery 效果实现,div失去焦点

问题描述

我想做一个弹出层.input的失去焦点的时候.[点击层内的link不关闭该层.点击该层外则关闭该层]这个jquery.应该怎么写啊!

解决方案

一楼的做法是可行的,但是比较繁琐。我的做法如下://层内的link点击事件,注意让事件停止冒泡$(".inner-link").click(function(event){event=event||window.event;event.stopPropagation();});//点击层外,隐藏这个层。由于层内的事件停止了冒泡,所以不会触发这个事件$(document).click(function(e){ $(".city-list").hide();});
解决方案二:
思路是:  给当前 document 绑定一个鼠标单击事件. 然后通过事件源event来获取触发事件的对象target,,,判断div层是否包含此对象.如果包含表示点击的是div,不隐藏.  如果不在div对象中,则隐藏.

时间: 2024-08-30 16:11:32

jquery 效果实现,div失去焦点的相关文章

jQuery实现的左右移动焦点图效果_jquery

本文实例讲述了jQuery实现的左右移动焦点图效果.分享给大家供大家参考,具体如下: jquery 部分: $(function () { var _speed = 1000; var _len = 0; var _size = 150; var _direction = 'left'; function mar(){ if(_direction == 'left'){ if(_len >= 450){ _direction = 'right'; }else{ $(".flow ul&qu

jQuery实现的Div窗口震动效果实例_jquery

本文实例讲述了jQuery实现的Div窗口震动效果.分享给大家供大家参考.具体如下: 这是一款jQuery窗口震动效果代码,在Div边框内点击一下鼠标,它就开始震动了,适用浏览器:IE8.360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗等. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/D

jquery京东商城双11焦点图多图广告特效代码分享_jquery

本文实例讲述了jquery京东商城双11焦点图多图广告特效.分享给大家供大家参考.具体如下: jquery实现的京东商城双11焦点图多图广告滑动及自动切换动画效果源码,是一段模仿京东商城双11的焦点图代码,专业应用于网站的图片展示及重点展示的区域,该段代码实现了鼠标滑过切换图片及自动切换图片两种效果. 运行效果图:     -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jque

jQuery左侧大图右侧小图焦点图幻灯切换代码分享_jquery

这是一款基于jQuery实现的右侧选项卡焦点图片轮播动画特效源码,每个图片的内容信息可以根据自己的喜好进行隐藏与显示,是一段超酷的焦点图轮播代码.  为大家分享的jQuery左侧大图右侧小图焦点图幻灯切换代码如下 ---------------------源码下载  效果查看-----------------------  <head> <meta http-equiv="Content-Type" content="text/html; charset=u

jquery ajax双击div可直接修改div中的内容_jquery

最近在做后台功能开发的时候,用到对排序字段的修改,感觉只为了修改一个排序值,而要重新进入编辑页比较麻烦,于是网上找点资料自己动手写了一个jquery双击实现直接修改排序值的效果: html代码: <div title="[双击可直接修改]" class="changeSort" id="{$id}">{$sort}</div> JS代码: <script type="text/javascript"

jquery简单的div显示和隐藏特效

<!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> <meta http-equiv="Content-

jQuery实现企业网站横幅焦点图切换功能实例

  这篇文章主要介绍了jQuery实现企业网站横幅焦点图切换功能,实例分析了jQuery企业网站焦点图的详细实现方法,非常简单实用,需要的朋友可以参考下 本文实例讲述了jQuery实现企业网站横幅焦点图切换功能的方法.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

浅谈jQuery效果函数_jquery

jQuery有很多的效果可以实现,比如说淡入淡出的效果:<html> <head> <style> #box{width:200px;height:200px;background:red;opacity:1;} </style> </head> <body> <div id="box"> </div> <input type="button" value=&quo

jQuery+html5实现div弹出层并遮罩背景_jquery

渐入弹窗,背景变色不可点击.查看效果:http://runjs.cn/detail/t08gmoij <!doctype html> <html> <head> <meta charset="utf-8"> <title>popup</title> <script type="text/javascript" src="jquery-2.1.3.min.js">&