2

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

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

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

我考虑过在覆盖 div 元素的 CSS 中设置pointer-events为none，但我不希望这样，因为我希望突出显示的元素在突出显示时变为非活动状态（即无法单击链接）。

任何人都知道我如何突出显示框架中的所有元素（当然是单独的）？没有卡在最外层的元素上？

4

1 回答 1

0

您的方法的问题是，您只有一个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>
于 2013-04-26T04:31:19.487 回答