js中如何通过单击事件获取当前对象,并传递

js中如何通过单击事件获取当前对象,并传递,第1张

在给标签绑定事件时在回调事件里有一个event参数,可以通过eventtarget获取当前对象,在处理函数里把当前对象当做参数传递过去。如:

//绑定事件

$('list')click(function(event){

    var ele=eventtarget;

    deal(ele);

});

//处理函数

function deal(obj){

    

}

只是举一个例子,如果有错误,请指出。

    开发中,当执行一个事件时需要去知道触发这个事件的对象是谁?那么,如何获取,在这里我就对 eventsrcElement与eventtarget *** 作获取略作区分 。

eventsrcElement: 表示可以获取当前作用事件的对象。

eventtarget: 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。

兼容性:

eventtarget: Ie9+ 火狐、谷歌;

eventsrcElement:ie 678;

srcElement 是 IE 下的属性

target 是 Firefox 下的属性

Chrome 浏览器同时有这两个属性

一、利用eventsrcElement 获取标签:

eventsrcElementtagName :因为它获取出来的都是以 大写 的形式,例如(“A”,“DIV”)所以需要转换 objtagNametoLowerCase()="a"

二、 利用eventsrcElement 获取子对象:

第一个子标签 :eventsrcElementfirstChild;

最后个一个是: eventsrcElementlastChild;

第几个孩子: eventsrcElementchildren[i];

所有孩子: eventsrcElementchildren;

所有孩子节点: eventsrcElementchildNodes;

三、利用eventsrcElement 获取父对象:

eventsrcElementparentElement; 可以理解成是在鼠标所在对象的上一个对象。

四、venttarget的 判断使用  

 js中事件是会泡的,eventtarget它永远是直接接受事件的目标DOM元素  

一般是获取这个对象的id,兼容的写法如下:

var targetId = eventtarget eventtargetid : eventsrcElementid;

获取id后再拿到事件中去判断。

谢谢观读~

��

关于JS获取与设置文本框、文本域光标位置

//获取光标所在文本框的位置

function getCaret(textbox) {

var control = documentactiveElement;

textboxfocus();

var rang = documentselectioncreateRange();

rangsetEndPoint(“StartToStart”,textboxcreateTextRange())

controlfocus();

alert(rangtextlength);

}

//获取光标所在文本域的位置

function getCaretForTextArea(ZysrID){

var txb = documentgetElementById(ZysrID);//根据ID获得对象

var pos = 0;//设置初始位置

txbfocus();//输入框获得焦点,这句也不能少,不然后面会出错,血的教训啦

var s = txbscrollTop;//获得滚动条的位置

var r = documentselectioncreateRange();//创建文档选择对象

var t = txbcreateTextRange();//创建输入框文本对象

tcollapse(true);//将光标移到头

tselect();//显示光标,这个不能少,不然的话,光标没有移到头当时我不知道,搞了十几分钟

var j = documentselectioncreateRange();//为新的光标位置创建文档选择对象

rsetEndPoint(“StartToStart”,j);//在以前的文档选择对象和新的对象之间创建对象,妈的,不好解释,我表达能力不算太好有兴趣自己去看msdn的资料

var str = rtext;//获得对象的文本

var re = new RegExp(“[//n]“,”g”);//过滤掉换行符,不然你的文字会有问题,会比你的文字实际长度要长一些搞死我了我说我得到的数字怎么总比我的实际长度要长

str = strreplace(re,”");//过滤

pos = strlength;//获得长度也就是光标的位置

alert(pos);

rcollapse(false);

rselect();//把光标恢复到以前的位置

txbscrollTop = s;//把滚动条恢复到以前的位置

}

//设置光标在文本框中的位置

function setCaret(id,pos){

var textbox = documentall(id);

var r = textboxcreateTextRange();

rcollapse(true);

rmoveStart(‘character’,pos);

rselect();

}

//设置光标位置的调用函数

function readyforset(id){

var pos = documentgetElementById(‘setpos’)value;

setCaret(id,pos);

}

if(!-[1,])//如果是IE

{

var p=getCursortPosition(obj);;

}

if(p>0)

{

setCaretPosition(obj,p);

}

代码如下:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>获取鼠标在Canvas中的坐标位置</title>

<style>

#canvas{

border:1px solid #ccc;

width:300px;

height:300px;

overflow:hidden;

}

</style>

<script>

function get_canvas(ev,obj){

m_clientX = evclientX-objoffsetLeft;

m_clientY = evclientY-objoffsetTop;

documentgetElementById("tips")innerHTML = "当前坐标:X:"+ m_clientX + " ,Y:" +m_clientY;

}

</script>

</head>

<body>

<div id="tips"></div>

<div id="canvas" onmousemove="get_canvas(event,this)"></div>

</body>

</html>

兼容IE8+

用 javascript 获取当前页面上鼠标(光标)位置在许多情况下都会用到,比如拖放,悬停提示(tooltip) 等等。当然,这里我们依然要面对浏览器的兼容问题,在不同的浏览器下,对这些相关的属性处理方式也不同。

参考资料

首页 → 网络编程 → JavaScript → javascript技巧 → js获取鼠标位置实例详解脚本之家[引用时间2018-1-18]

以上就是关于js中如何通过单击事件获取当前对象,并传递全部的内容,包括:js中如何通过单击事件获取当前对象,并传递、JS轻松获取对象之srcElement与target篇、js 获取文本框位置等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9797553.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-02
下一篇 2023-05-02

发表评论

登录后才能评论

评论列表(0条)

保存