使用jQuery突出显示元素，无法获取内部元素 [英] Using jQuery to highlight elements, can't get to inner elements

问题描述

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

I'm trying to create somewhat of a highlighting/selecting tool [using jQuery] in my web app that watches what elements you hover over inside an iFrame, selects the hovered-over element, and uses that element's styling to create on overlaying div. Think of the element selection tool in your web inspector.

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

Here's a demo that selects all visible elements (except html and body). Hover over one: http://jsfiddle.net/PrAfG/3/

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

The problem I'm having is that if you move really quickly across the frame you can get at the inner elements and highlight them, but if you move slowly or at a regular speed across the frame the first outer div that the cursor touches gets highlighted, and is henceforth stuck highlighting it because the overlaying div blocks the cursor from touch other elements in the page.

我考虑将指针事件设置为在重叠div元素的CSS中没有，但我不希望这样，因为我希望突出显示的元素在突出显示时变为非活动状态（即无法单击链接）。

I've considered setting pointer-events to none in the CSS of the overlaying div element, but I don't want that because I want the highlighted element to become inactive when it's highlighted (ie a link can't be clicked).

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

Anyone know how I can highlight all of the elements (individually of course) in the frame? Without getting stuck on the outermost elements?

推荐答案

你的方法的问题是，你只有一个突出显示元素。

The problem with your approach is, you only have one highlight element.

因此，就像你遇到问题的情景一样，你没有办法解雇 mouseout 在内区域内的事件。

So just like the scenario you are having issues with, you don't have a way to fire a mouseout event while staying inside the area.

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

My suggested approach would be to actually scan through all visible elements first.

对于每个可见元素，制作一个虚拟< div> ，它具有完全相同的上，左， outerWidth ， outerHeight ，offset和z-index 。

For each visible element, make a dummy <div> which has the exact same top, left,outerWidth, outerHeight, offset and z-index.

换句话说，制作整个结构的非常浅的副本，与深度克隆的极端相反。

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

Also, if you think my suggestion fits as an answer, I have one more minor suggestion. Search for the smartresize plugin, and on resize of your iframe that has percentage/flexible widths, recalculate the div dimensions and positions. I'll leave that to you.

DEMO ： 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中做了一处更改

And I made one change in the 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）

And one change to the HTML (inner DIV removed)

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

这篇关于使用jQuery突出显示元素，无法获取内部元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！