HTML和JavaScript與onclick事件和內部HTML

因爲幾天對於這個問題，我的工作，但我還沒有找到我的問題的解決方案呢。因此，我想問你一個解決方案。所以，我告訴你我的代碼在第一次：

<style type="text/css"> 
td.tum { 
    border-width: 8px; 
    border-style: solid; 
    background-color: rgb(255, 255, 255); 
    cursor:      hand; 
    font-family:   Arial; 
    font-weight:   bold; 
    text-align:   center; 
    vertical-align:  top; 
    width:       120px; 
} 
td.tum a:link, td.tum a:visited, td.tum a:active { 
    color:#FFFFFF; 
    text-decoration:none; 
} 
td.tum a:hover, #tum5 a:hover { 
    color:#FF0000; 
    text-decoration:none; 
} 
#tead1 { 
    text-align:   center; 
} 
#tum1 { 
    border-color: rgb(96, 74, 123); 
    background-color: rgb(180, 170, 200); 
    height:      200px; 
    padding-top:   50px; 
} 
#tum2 { 
    border-color: rgb(119, 147, 60); 
    background-color: rgb(180, 200, 140); 
    height:      200px; 
    padding-top:   50px; 
} 
</style> 
<script src="jquery-1.10.1.min.js"></script> 
<script type="text/javascript"> 
function changeText1(){ 
     document.getElementById('tum1').innerHTML = '<a href="http://www.youtube.com/">Youtube</a><br><hr><br><a href="http://www.microsoft.com/de-de/default.aspx" target="_blank">Microsoft</a>'; 
     } 
function restoreText1(){ 
     document.getElementById('tum1').innerHTML = 'Youtube'; 
} 
function changeText2(){ 
     document.getElementById('tum2').innerHTML = '<a href="http://www.nytimes.com/">New York Times</a><br><hr><br><a href="http://www.apple.com/de/" target="_blank">Apple</a><br><a href="http://www.zalando.de/?wt_ga41=8452736386_38069418586&wt_gk41=Phrase_8452736386_zalando&gclid=CLuz2qnw7r4CFejHtAodl3IA1Q" target="_blank">Zalando</a><br>'; 
} 
function restoreText2(){ 
     document.getElementById('tum2').innerHTML = 'New York Times'; 
} 

</script> 


<table border="0px" cellpadding="0" cellspacing="0"> 
     <tr> 
       <td id="tum1" rowspan="2" class="tum" 
         onmouseenter="this.style.backgroundColor='rgb(96, 74, 125)'; changeText1()" 
         onmouseleave="this.style.backgroundColor='rgb(180, 170, 201)'; restoreText1();" 
         onclick="document.location.href='http://www.youtube.com/'"> 
         <div class="tead1">Youtube</a></div> 
       </td> 
       <td id="tum2" rowspan="2" class="tum" 
         onmouseenter="this.style.backgroundColor='rgb(119, 147, 61)'; this.style.cursor='hand'; changeText2()" 
         onmouseleave="this.style.backgroundColor='rgb(180, 200, 141)'; restoreText2();" 
         onclick="document.location.href='http://www.nytimes.com/'" 
         New York Times 
       </td> 

</table>

我的問題是，我想點擊子鏈路："Microsoft" "Zalando"或"Apple"沒有，因爲它會打開一個窗口啓動onclick事件和重定向實際的網站上子鏈接。但是，目標是當用戶點擊僅有子鏈接打開窗口的子鏈接時。此外，如果用戶點擊紫色或綠色區域，則應在當前幀中打開主鏈「youtube」或「紐約時間」（這已完成）。但是，正如您所看到的，點擊子鏈接和該區域的onclick事件之間存在衝突。

我希望你能幫助我，欲瞭解更多信息，請寫信。

Greets

來源

2014-06-10 cimbom

這可能有所幫助：http://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute。嘗試重寫單擊事件並停止默認行爲。 – Canttouchit

謝謝你的回覆。當我使用這個：function changeText1（）{document.getElementById（'tum1'）。innerHTML ='Youtube

Microsoft'; }然後它解決了我的問題，但當我在鏈接上時，紅色消失。我只有黑色，這意味着它保持靜態，但沒有window.open的其他鏈接是紅色的。你知道這個解決方案嗎？ – cimbom

試試這個：

function changeText1(){ 
    document.getElementById('tum1').innerHTML = '<a href="http://www.youtube.com/">Youtube</a><br><hr><br><a onclick="window.open(\'http://www.microsoft.com/de-de/default.aspx\',\'_blank\'); event.stopPropagation();">Microsoft</a>'; 
}

這將打開新的一頁，event.stopPropagation的URL（）停止「tum1」中的onclick事件。

來源

2014-06-10 09:27:36 user77318

將添加到鏈接將獲得onmouseover紅色。 – user77318

你在找window.open嗎？

https://developer.mozilla.org/en-US/docs/Web/API/Window.open http://www.w3schools.com/jsref/met_win_open.asp

window.open(url,'_blank'); 
window.open(url);

工作示例代碼： http://jsfiddle.net/arjankuijpers/3tk2a/

來源

2014-06-10 09:06:54 Zezura

我也嘗試過window.open，但在這裏，當我點擊Apple時，它會將我重定向到Apple的頁面並打開一個新窗口。但它應該只會將我重定向到Apple的頁面，而不會激活紐約時報的onclick事件。 – cimbom

http://jsfiddle.net/arjankuijpers/3tk2a/ 這適用於我（safari）， 1.我可以打開一個窗口。 2.作爲新標籤。 – Zezura

HTML和JavaScript與onclick事件和內部HTML

回答

相關問題