jquery - 使用jQuery突出显示元素，无法获取内部元素

Question

我正在尝试在我的网络应用程序中创建某种突出显示/选择工具[使用 jQuery]，该工具可以监视您将鼠标悬停在 iFrame 内的元素，选择悬停的元素，并使用该元素的样式来创建覆盖div。想想网络检查器中的元素选择工具。

这是一个选择所有可见元素(html 和 body 除外)的演示。将鼠标悬停在一个上:http://jsfiddle.net/PrAfG/3/

我遇到的问题是，如果您在框架上移动得非常快，您可以找到内部元素并突出显示它们，但如果您在框架上缓慢或以常规速度移动，第一个外部 div光标触摸的 会突出显示，并且此后会一直突出显示它，因为覆盖的 div 会阻止光标触摸页面中的其他元素。

我考虑过在覆盖 div 元素的 CSS 中将 pointer-events 设置为 none，但我不希望这样做，因为我希望突出显示的元素当它突出显示时变为非事件状态(即无法单击链接)。

有人知道如何突出显示框架中的所有元素(当然是单独的)吗？不会卡在最外面的元素上？

Answer 1

你的方法的问题是，你只有一个 highlight元素。

因此，就像您遇到问题的情况一样，您没有办法触发 mouseout留在区域内时举办事件。

我建议的方法是首先实际扫描所有可见元素。

对于每个可见元素，创建一个虚拟元素 <div>具有完全相同的 top, left, <强> outerWidth , outerHeight , offset and z-index .

换句话说，对整个结构进行非常浅的复制，与深层克隆截然相反。

此外，如果您认为我的建议适合作为答案，我还有一个小建议。搜索 smartresize 插件，并在调整具有百分比/灵活宽度的 iframe 大小时，重新计算 div 尺寸和位置。我会把这个留给你。

<小时/>

演示:http://jsfiddle.net/terryyounghk/Mh6Hf/

var $viewFrame = $('div.viewport-container iframe.output-frame').contents(),
    $visibles = $viewFrame.find('*:not(html body)').filter(':visible'),
    $viewContainer = $('div.viewport-container'),
    $overlayElements = $visibles.map(function (i, el) {
        var $el = $(el),
            $overlayEl = $('<div>');

        $overlayEl.addClass('overlay') // this is our identifier
        // we need { width:.., height:.., left:.., top:.., z-index:...}
        .css($.extend({
            position: 'absolute',
            width: $el.outerWidth(),
            height: $el.outerHeight(),
                'z-index': $el.css('z-index')
        }, $el.offset()));

        $el.data('overlay', $overlayEl); // now the actual object has reference to the overlay
        $overlayEl.data('element', $el); // vice versa, now the overlay has reference to the actual object


        // you can do more stuff here...

        return $overlayEl.get();
    });

$overlayElements.appendTo($viewContainer)
    .hover(
        function () { $(this).addClass('highlight'); },
        function () { $(this).removeClass('highlight'); }
    );

我对 CSS 进行了一项更改

...
/*div.element-highlight removed*/ div.highlight {
    /*display: hidden;*/ /* <---- removed */
    position: absolute;
    background-color: yellow;
    opacity: 0.5;
    cursor: default;
    pointer-events: auto;
}

对 HTML 进行了一项更改(删除了内部 DIV)

<div class=element-highlight></div>