javascript - HTML 和 JavaScript 以及 onclick 事件和内部 HTML

Question

hell 家伙，

我已经为这个问题工作了几天，但我还没有找到解决我的问题的方法。因此我想请教您一个解决方案。所以，我首先向您展示我的代码:

<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>

我的问题是我想在不启动 onclick 的情况下单击子链接:"Microsoft""Zalando" 或 "Apple" > 事件，因为它会打开一个窗口并重定向子链接上的实际站点。但是，目标是当用户单击子链接时，只有子链接会打开一个窗口。此外，如果用户单击紫色或绿色区域，则应在当前框架中打开主链接“youtube”或“纽约时报”(这已经完成)。但正如您所看到的，单击子链接和区域的 onclick 事件之间存在冲突。

希望您能帮助我，如需更多信息，请写信。

问候

Answer 1

试试这个:

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

这将在新页面中打开 URL，并且 event.stopPropagation() 会停止“tum1”中的 onclick 事件。