javascript - 在 Jquery 中创建 Firebug 对象选择器工具

Question

我正在尝试创建一个工具(使用 jquery)以便能够选择页面上的元素，这与 Firebug 中的选择器工具的工作方式非常相似。您可以在其中切换工具，然后将鼠标悬停在页面上，并且悬停在其上的每个元素都会有一个边框。该工具(目前)只需要在 span、div 和 img 元素上工作。这是到目前为止我的代码:

    $(document).ready(function() {

    $('a').click(function(e) {
        e.preventDefault();
        return false;
    });



    $("img").hover(function() { //On Mouse Over
        //Collect current border information and create red border.
        var currentBorder = new Array();
        currentBorder[0] = $(this).css('border-top-color');
        currentBorder[1] = $(this).css('border-top-width');
        currentBorder[2] = $(this).css('border-top-style');
        currentBorder[3] = $(this).css('border-left-color');
        currentBorder[4] = $(this).css('border-left-width');
        currentBorder[5] = $(this).css('border-left-style');
        currentBorder[6] = $(this).css('border-right-color');
        currentBorder[7] = $(this).css('border-right-width');
        currentBorder[8] = $(this).css('border-right-style');
        currentBorder[9] = $(this).css('border-bottom-color');
        currentBorder[10] = $(this).css('border-bottom-width');
        currentBorder[11] = $(this).css('border-bottom-style');
        $(this).css('border', 'solid thin red');
        $(this).css('cursor', 'crosshair');

    }, function() { //On Mouse Out
        //Return border to previous state.
        $(this).css('border', 'none');
        $(this).css("border-top-color", currentBorder[0]);
        $(this).css("border-top-width", currentBorder[1]);
        $(this).css("border-top-style", currentBorder[2]);
        $(this).css("border-left-color", currentBorder[3]);
        $(this).css("border-left-width", currentBorder[4]);
        $(this).css("border-left-style", currentBorder[5]);
        $(this).css("border-right-color", currentBorder[6]);
        $(this).css("border-right-width", currentBorder[7]);
        $(this).css("border-right-style", currentBorder[8]);
        $(this).css("border-bottom-color", currentBorder[9]);
        $(this).css("border-bottom-width", currentBorder[10]);
        $(this).css("border-bottom-style", currentBorder[11]);
        $(this).css('cursor', 'default');
    });

    var currentColor;
    $("span").hover(function() { //On Mouse Over

        //Collect current border information and create red border.

        currentColor = $(this).css('color');
        $(this).css('color', 'red');
        $(this).css('cursor', 'crosshair');


    }, function() { //On Mouse Out

        //Return border to previous state.      
        $(this).css('color', currentColor);
        $(this).css('cursor', 'default');

    });








        $("div").hover(function() { //On Mouse Over
        //Collect current border information and create red border.
        var currentBorder = new Array();
        currentBorder[0] = $(this).css('border-top-color');
        currentBorder[1] = $(this).css('border-top-width');
        currentBorder[2] = $(this).css('border-top-style');
        currentBorder[3] = $(this).css('border-left-color');
        currentBorder[4] = $(this).css('border-left-width');
        currentBorder[5] = $(this).css('border-left-style');
        currentBorder[6] = $(this).css('border-right-color');
        currentBorder[7] = $(this).css('border-right-width');
        currentBorder[8] = $(this).css('border-right-style');
        currentBorder[9] = $(this).css('border-bottom-color');
        currentBorder[10] = $(this).css('border-bottom-width');
        currentBorder[11] = $(this).css('border-bottom-style');
        $(this).css('border', 'solid thin red');

    }, function() { //On Mouse Out
        //Return border to previous state.
        $(this).css('border', 'none');
        $(this).css("border-top-color", currentBorder[0]);
        $(this).css("border-top-width", currentBorder[1]);
        $(this).css("border-top-style", currentBorder[2]);
        $(this).css("border-left-color", currentBorder[3]);
        $(this).css("border-left-width", currentBorder[4]);
        $(this).css("border-left-style", currentBorder[5]);
        $(this).css("border-right-color", currentBorder[6]);
        $(this).css("border-right-width", currentBorder[7]);
        $(this).css("border-right-style", currentBorder[8]);
        $(this).css("border-bottom-color", currentBorder[9]);
        $(this).css("border-bottom-width", currentBorder[10]);
        $(this).css("border-bottom-style", currentBorder[11]);

    });


});

目前，代码将监听器绑定(bind)到这些类型对象的每个实例，悬停时它将 css 样式存储在 var 中，并将其变为红色。然后当鼠标悬停时，它会恢复之前的 css 属性和值。到目前为止，这似乎有效，但我的 onlu 问题出现在如下页面上:

<div>
     <span>This is my first span</span>
     <span>This is my second span</span>
     <span>This is my third span</span>
</div>

问题是，当滚动到跨度上时，跨度和周围的 div 都会触发悬停事件。盯着屏幕看了一会儿，我就被难住了。

如果您能提供更好的方法来解决此问题，我将不胜感激，当我让它正常工作时，我将在此处发布最终代码。

谢谢!

Answer 1

如果您希望鼠标悬停在某个元素上时不冒泡，请使用 stopPropagation()。

$('img').hover(function(event) {
   event.stopPropagation();
}, ...);

更好的方法可能是将事件处理程序附加到文档，并使用 event.which 来确定事件的启动原因。

$(document).hover(function(event) {
   var element = event.which;
}, ...);