鼠標懸停事件傳播的問題 - 手動傳播

我實現了用戶界面的一個項目我的工作，並可以在這裏找到：Toobrok 鼠標懸停事件傳播的問題 - 手動傳播

每個用戶的鼠標進入一個div時間，一類被添加到這個div來突出顯示它，我使用stopPropagation()方法來限制突出顯示到z-索引較高的div（z軸上的頂部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?

而是因爲我的條件是其他用戶的動作，我不能使用，在我的情況下......，我不能同步等待用戶做一些事情。

來源

2014-06-24 Oxynum

正確的，如果我錯了，但是你想在按鍵上更改z-index？你能提供一些CSS和HTML嗎？ – MrCkobe

我不想更改按鍵上的div的z索引，但要更改mouseovered元素的z索引（更改可能不是正確的動詞，因爲如果z索引相同，我仍然想要從一個div到另一個）我沒有提供任何HTML或CSS，因爲此代碼已被寫入未知網頁上進行編寫。但我會嘗試寫一個例子 – Oxynum

也許你可以增加z-index在鼠標中的某個值，並在鼠標輸出時減少它的相同值。 – MrCkobe

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; 
});

}）;

來源

2014-06-27 18:51:05

我不認爲你理解這個問題，但它不能解決我的問題。 – Oxynum

我開始編寫代碼，但後來決定離開實施給你。這裏是文字說明：

在時間（可能是在通過所有用戶按下按鈕，即可循環徘徊元素）你必須找到所有候選人強調某一點。除此之外，沒有其他方法可以完成它，而不是手動循環遍歷所有元素，並檢查鼠標位置是否在綁定矩形內。您可以通過鼠標懸停回調中的參數獲取鼠標座標。將所有這些懸停的元素保存在某個數組中。
接下來，您必須手動選擇要突出顯示的元素。只需突出顯示已保存數組中的第一個元素並將元素移至數組的末尾即可。你也可能想要增加這個元素的z-index併爲mouseout添加回調到這個元素。

希望它有幫助，隨時問，如果你需要更多的細節。

來源

2014-06-29 11:55:22

它有幫助，我想我必須記錄數組中的所有元素並循環遍歷它們。我會很快嘗試這種方法，並告訴你它是如何發生的。 – Oxynum

@Oxynum嘿兄弟，友善提醒即將到期的賞金 –

你有沒有嘗試過這樣的CSS？

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

我應該希望div元素會自動突出顯示兩者的顏色您選擇

來源

2014-07-01 13:14:38

你可以使用CSS屬性pointer-events使孩子不敏感的div容器。然後事件將被定位到下面顯示的元素。對於簡單的突出顯示，您應該使用純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); 
});

來源

2014-07-03 20:20:03

鼠標懸停事件傳播的問題 - 手動傳播

回答

相關問題