玉/內PUG插入標籤以外的

Question

這是我PUG/JADE代碼如下

a(href="#card") 
    div.tile 
    h1 open card 

    #card 
     a(href="#") click to close 

但是這個代碼不正確打印，則.tile已經打印出來的<a>， 可以查看下面的打印代碼。

<a href="#card"></a> 
<div class="tile"> 
    <a href="#card"> 
    <h1>Open card</h1> 
    </a> 

    <div id="card"> 
    <a href="#card"></a> 
    <a href="#">click to close</a> 
    </div> 
</div> 

我需要這個代碼，以便：內鏈接

<a href="#card"> 
    <div class="tile"> 
    <h1>Open card</h1> 
    <div id="card"> 
     <a href="#">click to close</a> 
    </div> 
    </div> 
</a> 

Answer 1

鏈接是無效的HTML。 Jade大概會在內部使用HTML生成器來修正語法。如果您手動編寫您認爲您想要的HTML並在瀏覽器中查看它，您應該看到相同的結果 - 它會將第二個a標記移動到第一個以外。

Answer 2

我有一個類似的用例，其中我需要一個DOM元素，它包含一個位於錨標記內部的div內的單擊處理程序。

我用了一個span作爲內部點擊元素，並使用了JavaScript函數addEventListener。請記住在內部可點擊元素上使用event.preventDefault（），因此您不會觸發封閉錨標籤上的href。