javascript - 悬停元素时过滤最后一个孩子

Question

我有问题当我想创建 jquery 的检查器插件时，如果我选择元素的子元素不应该选择父元素。

这是双边框检查，实际上只检查主元素，但随后是父元素。

这是我的 jsfiddle

http://jsfiddle.net/Rp7hr/46/

这段代码我的插件是如何调用的

$(function(){

    //generate dropdown list   
    var test = $('.summary').ksinspect();


});

我不明白为什么 iframe 标签上的元素不能悬停？

Answer 1

您看到的效果是因为事件冒泡。停止你应该使用event.stopPropagation()

这是更新的DEMO

查看更新

_ks.onMouseOver = function() {
    var el = ktm.query(document).find('*');
    el.on('mouseenter',function(e){
        e.stopPropagation(); // THIS is newly added line...
        var d = new Date();
        var id = d.getTime() + randomID(1);
        var parents = ktm.query(this).parents("*");
        var getParents = _get_parents(ktm.query(this));
        ktm.query(this).attr('data-key',id); //add attr data-key
        ktm.query(getParents).removeClass('glare'); //remove class
        ktm.query("[data-key=" + id + "]").addClass('glare'); //add class 
        console.log("selector = " + getParents);
        console.log("cusrrent selector = " + this);
    });
}