jquery获取当前点击的标签节点名称的方法原创

文章标签: event jquery入门实例
  • :
  • 12-20 21:36
  • :
  • 22次
  • :
  • 0条
  • 3赞

简介在jquery里获取鼠标单击时,获取被单击的标签节点名称的方法。

在jquery里,我们在为元素绑定单击事件时,因为“冒泡”的原因,所以我们在要操作被点击的标签节点时,使用e.target获取到的,不一定就是我们想要操作的那个标签节点,这时,我们就要通过获取标签节点的名称,来判断用e.target获取到的标签节点,是否不是我们要操作的那个标签节点。

比如下面这个实例:

<div>
    <a href="http://www.aijquery.cn"><b>爱jQuery</b></a>
</div>

我们要实现这样一个效果:

当点击页面里的链接时,给链接添加一个“on”的CSS样式,代码很简单:

$("a").on("click",function(e){
    //我们可以用下面这句来实现我们要的效果
    $(this).addClass("on");
    
    //但如果我们在某些特殊情况下,不能使用$(this),
    //而只能使用event对象来获取鼠标点击的标点节点时
    //如下面这样:
    $(e.target).addClass("on");
    //那么我们添加的on样式是添加在<b></b>标签上的
});

像上面说的那样,这时我们就需要先判断当前标签节点的名称,如果不是A标签,那么就获取当前点击对象的父节点:

$("a").on("click",function(e){
    var $this=$(e.target);
    if(e.target.tagName !="a"){
        $this=$(e.target).parent("a");
    }
    $this.addClass("on");
});


您正在找的文章可能是: