Question

我正在为我正在进行的项目实施用户界面，可在此处找到：Toobrok

每次用户的鼠标输入div时，都会在此div中添加一个类来突出显示它，我使用stopPropagation()方法将突出显示限制为z-index较高的div（顶部）在z轴上的div）。但是，有时候，我的用户需要选择一个被另一个隐藏的元素，当2个元素的尺寸不同时，如果底部div更大，他可以找到底部div的一些点不被顶部div隐藏，但是当尺寸相同时，我希望用户能够按一个键来改变他选择的深度（在z轴上）。

相关代码如下（在CoffeeScript中），但javascript解决方案也可以帮助我：

Ui.bind = (elements, index) ->
  ids = Ui.getIdSelector(elements)
  $(ids).attr("centroid", index)
  $(ids).mouseover (event) ->
    event.stopPropagation()
    Ui.highlight $(ids)
  $(ids).mouseout (event) ->
    event.stopPropagation()
    Ui.resetHighlight $(ids)

我希望问题很清楚，并期待你的回答。

这是要考虑的HTML示例：

<!DOCTYPE html>
<html>
  <head>
    <title> Sample page </title>
  </head>
  <body>
    <div id="container">
       <div id="child1">Some text...</div>
    </div>
  </body
</html>

相关的css：

#container {
  height: 200px;      
  width: 500px;
}

#child1 {
  height: 90%;
  width: 90%;
}

当鼠标进入child1元素时，此元素会突出显示，我希望容器元素在用户按特定键时突出显示。

我可以使用JQuery parent（）函数在这个例子中选择该元素，但我不确定它是一个很好的解决方案，有时，父级可以有0px的大小，然后鼠标悬停在这个元素上不一致。如果我不使用stopPropagation（）事件，我想选择通常由Javascript选择的元素。

我实际上发现了一些可能有用的东西： How to undo event.stopPropagation in jQuery?

但我不能在我的情况下使用它...因为我的条件是另一个用户操作，我不能同步等待用户做某事。

Answer 1

我开始编写代码但后来决定将实现留给您。这是文字说明：

在某个时间点（可能是当用户按下按钮循环遍历所有悬停的元素时），您必须找到所有候选项以突出显示。没有其他方法可以做到这一点，而不是手动遍历所有元素并检查鼠标位置是否在其绑定的rect内。您可以在mouseover回调中从参数获取鼠标坐标。将所有这些悬停元素保存在某个数组中。
接下来，您必须手动选择要突出显示的元素。只需突出显示已保存数组中的第一个元素，然后将该元素移动到数组的末尾即可。您还可能希望增加此元素z-index并将mouseout的回调添加到此元素。

希望它有所帮助，随时询问您是否需要更多详细信息。

Answer 2

var preId = 0;
function makeBlack(id)
{
    if(id)
    {
        $('#'+id).css('border-color','black');
    }
}
function makered(id)
{
    $('#'+id).css('border-color','red');
}
$(document).ready(function(){

$('div').mouseout(function() {
    var currentid = this.id;
    makeBlack(currentid);
    preId = currentid;

});
$('div').mouseleave(function() {
    var currentid = this.id;
    makeBlack(currentid);
    preId = currentid;

});
$('div').mouseover(function() {
    var currentid = this.id;
    makeBlack(currentid);   
    makered(preId);
    preId = currentid;

});
$('div').mouseenter(function() {
    var currentid = this.id;
    makered(currentid);
    preId = currentid;
});

}）;

Answer 3

你有没有尝试过这样的CSS？

#container.hover{
  height: 200px;      
  width: 500px;
  //add a background-color to that element since its a div element
  //background-color: (colour)
}

我希望div元素会自动用您选择的颜色突出显示容器div

Answer 4

您可以使用CSS属性pointer-events来使子不敏感。然后事件将定位到下面显示的元素。对于简单的突出显示，你应该使用纯CSS，但是，jQuery可以帮助不突出显示父元素，而没有 Ctrl 的孩子。

一些示例（也上传到JSFiddle，点击进入输出窗格以使其对键盘事件做出响应）：

<div id="container1" class="container">
    <div id="child1" class="child">Some text...</div>
</div>

div { border:1px dashed red; } /* for demo */

.container
{ height: 200px;
  width: 500px;
}

.child
{ height: 90%;
  width: 90%;
}

.insensitive
{ pointer-events:none;
}

.container:hover:not(.no-hilight),
.child:hover
{ background-color:yellow;
}

/* other color for demo */
.child:hover{ background-color:green; }

// make events passthrough child when <Ctrl> is held down
$(document).on('keydown keyup', function(ev) {
    if (ev.key === 'Control') // for performance
        $('.child')[ev.ctrlKey?'addClass':'removeClass']('insensitive');
});

// don't hilight container when child is hovered
$('.child').on('mouseover', function(ev)
{ 
  $('.container').addClass('no-hilight');
});

// never suppress hilight when container is hovered directly
$('.container').on('mouseover', function(ev)
{ if(ev.target === ev.currentTarget)
    $('.container').removeClass('no-hilight');
});

// just test which element a click is targeted to
$(document).on('click', function(ev)
{ console.log('click:', ev.target);
});

鼠标悬停事件传播问题 - 手动传播

4 个答案: