event.target/srcElement一点应用

标签: event target srcelement | 发表时间:2013-01-10 23:55 | 作者:sjR10
出处:http://www.cnblogs.com/

今天工作遇到一个问题,在朋友帮助下解决了,写下来跟大家分享下。

首先说下需求,有一个文本框,文本框下面有个隐藏的div,div中有几个a标签,当点击文本框时候,div显示出来,点击div中的a标签,会将a标签的值赋到文本框中。点击其他地方时候则隐藏div。

如图   点击文本框,下面div显示

点击a标签时候 a标签值赋到文本框中

当点击外面时候div隐藏

 

刚开始想的很简单,给文本框一个onblur跟onfoucs事件,分别对应着文本框的隐藏跟显示。a标签注册点击事件。

<table>
<tr>
<td>
</td>
<td id="tdtd">
<input type="text" id="txtV" value="">
<div id="dv" style="display: none; border: solid 1px red">
<a href="javascript:void(0)" onclick="addFun(this,1212)">1212</a>
</div>
</td>
</tr>
</table>

js:

$(function () {
$("#txtV").focus(function () {
$("#dv").show();
}).blur(function () {
$("#dv").hide();
});
})

function addFun(a, value) {
$(a).parent().prev("input").val(value);
}

但是这样子出现了一个问题 ,当点击a标签的时候,他首先触发的文本框的blur事件,这样子a标签的onclick就没有效果。

后来朋友的提示下改了下,思路是这样子的,给文本框一个click事件,让div显示。而给body一个mousedown事件,当鼠标不在文本框以及div中的时候,让他隐藏,刚开始还是想获取mousedown时候的鼠标位置,跟div 的height,width比较,想想比较麻烦。后来朋友一指点,恍然大悟,可以获取选中id,跟文本框,div比较。

改后的js:

$(function () {
$("#txtV").click(function () {
$("#dv").show();
})

$("body").bind("mousedown", function () {
var obj = event.srcElement ? event.srcElement : event.target;//为了兼容IE以及Chrome/FF
if (obj.id != "dv" && obj.id != "txtV" && $(obj).parents("#dv").length == 0) {
$("#dv").hide();
}
})

})

function addFun(a, value) {
$(a).parent().prev("input").val(value);
}

当选中的id不为div以及不为文本框,以为不为div中子元素(a标签)时候,则让div隐藏。

 

  

 

本文链接

相关 [event target srcelement] 推荐:

event.target/srcElement一点应用

- - 博客园_首页
今天工作遇到一个问题,在朋友帮助下解决了,写下来跟大家分享下. 首先说下需求,有一个文本框,文本框下面有个隐藏的div,div中有几个a标签,当点击文本框时候,div显示出来,点击div中的a标签,会将a标签的值赋到文本框中. 如图   点击文本框,下面div显示. 点击a标签时候 a标签值赋到文本框中.

什么是 Event Loop?

- - 阮一峰的网络日志
Event Loop 是一个很重要的概念,指的是计算机系统的一种运行机制. JavaScript语言就采用这种机制,来解决单线程运行带来的一些问题. Aaron Cois的 《Understanding The Node.js Event Loop》,解释什么是Event Loop,以及它与JavaScript语言的单线程模型有何关系.

在Ubuntu 12.04上配置iSCSI Target服务

- - 婉兮清扬
今天自己按照网上搜来的教程自己在Ubuntu 12.04上配置了iSCSI Target服务,在这里简单地做个纪录. 操作系统是全新安装的Ubuntu 12.04,配置一块500 GB的SATA笔记本硬盘. 安装操作系统时将硬盘划分为两个分区,其中一个50 GB的分区(/dev/sda1)挂载为操作系统的根分区;另外一个450 GB的分区(/dev/sda2)作为提供存储服务的空间,暂时不挂载.

JS的event对象--知识点总结

- - CSDN博客推荐文章
Event描述:event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等. 需要注意的是:event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义. 比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义.

80%人都理解错误的 Event Loop

- - IT瘾-dev
本文的目的在于,一次性推翻80%人构建好的关于Event Loop的知识体系和一次性的完整的理解Nodejs(13以上)和浏览器中的Event Loop. 首先进行一下基础概念的划分. mouseover(之类的事件). Web API大部分异步返回方法(XHR,fetch). 逗知识:其实setTimeout和setInterval也属于Web API.

JavaScript 运行机制详解:再谈Event Loop

- - 阮一峰的网络日志
一年前,我写了一篇 《什么是 Event Loop. 》,谈了我对Event Loop的理解. 上个月,我偶然看到了Philip Roberts的演讲 《Help, I'm stuck in an event-loop》. 这才尴尬地发现,自己的理解是错的. 我决定重写这个题目,详细、完整、正确地描述JavaScript引擎的内部运行机制.

CQRS基本概念 | event sourcing | CQRS | axon | EdisonXu的技术分享

- -
在研究微服务的过程中,跨服务的操作处理,尤其是带有事务性需要统一commit或rollback的,是比较麻烦的. 本系列记录了我在研究这一过程中的心得体会. 本篇主要就以下几个问题进行介绍:. 什么是EventSourcing. EventSourcing和CQRS的关系. CQRS/ES怎么解决微服务的难题.

Axon Saga的使用 | event sourcing | CQRS | axon | DDD | EdisonXu的技术分享

- -
在上一篇里面,我们正式的使用了CQRS模式完成了AXON的第一个真正的例子,但是细心的朋友会发现一个问题,创建订单时并没有检查商品库存. 库存是否足够直接回导致订单状态的成功与否,在并发时可能还会出现超卖. 当库存不足时还需要回滚订单,所以这里出现了复杂的跨Aggregate事务问题. Saga就是为解决这里复杂流程而生的.

Midnight in Paris DVDRip XviD-TARGET 午夜巴黎/午夜·巴黎(台)/情迷午夜巴黎(港)

- biAji - 沒有水的魚 - 115网盘 国外网盘下载
◎译  名 午夜巴黎/午夜·巴黎(台)/情迷午夜巴黎(港). ◎片  名 Midnight in Paris. ◎类  别 喜剧/爱情/科幻. ◎语  言 英语/法语/西班牙语. ◎IMDB评分 8.1/10 from 19,940 users. ◎IMDB链接 http://www.imdb.com/title/tt1605783.

微服务数据一致性的演进:SAGA,CQRS,Event Sourcing的由来和局限-InfoQ

- -
讲微服务数据一致性的文章,网上比较多. 此前 EAWorld 与发过几篇,包括《 微服务架构下的数据一致性保证(一)》、《 微服务架构下的数据一致性保证(二)》、《 微服务架构下的数据一致性保证(三):补偿模式》,以及《 使用消息系统进行微服务间通讯时,如何保证数据一致性》. 本篇文章在我看来,是从一个纵向的维度把相关的一致性概念的演进过程,讲的比较清晰,简单的逻辑是这样的:.