在錨點標記頂部顯示交互式Html元素

我有一個由錨點標記包圍的區域，它應該指向錨點標記href，無論用戶在該區域單擊哪個位置。而且該區域應該包含一個文本框和按鈕控件，它應該允許用戶鍵入一些文本並提交。問題是當我點擊文本框或按鈕時，它會重定向到錨標記中給出的頁面。在錨點標記頂部顯示交互式Html元素

<a href="http://stackoverflow.com/"> 
<div style="border:1px solid grey;width:300px;height:100px;"> 
    <div style="">Title</div> 
    <div> 
    <input type="text" name="name"> 
    <button type="button" onclick="alert('button clicked');">Click Me!</button> 
</div> 
</div> 
</a>

請參考此jsfiddle。我在這裏創建了一個簡化的問題。但是我發現了一個解決方案，通過給出負邊界值。它正在工作，但我對更好的解決方案感興趣。由於此解決方案不可縮放，因爲按鈕和文本框不在內容div內。

這些部分中的每一個都代表搜索結果中的項目。當用戶點擊搜索項目時，它將導航到單個項目頁面。同時用戶應該可以通過選擇編輯選項來編輯搜索結果視圖中的內容。當他們選擇編輯時，應該出現一個文本框和一個提交按鈕。

來源

2013-10-10 Kasun Jayasinghe

正如加雷思說，答案是否定的使用的<div onclick="function()">代替<a>的標籤。但你究竟想達到什麼目的？你能描述一下你的初衷嗎，而不是根據你所做的事情來談論？那麼你可能會得到更好的解決方案。 –

不幸的是，HTML5規範說的有關<a> element：

內容模型：

透明的，但必須有沒有interactive content後裔。

這意味着什麼是，一個<a>元件允許包含任何元素的父允許包含，除之類的東西<button>。

你需要找到一個辦法讓你<button>和<input>工作<a>

來源

2013-10-10 09:44:16 Gareth

使用此

<input type="text" name="name" onclick="return false;" />

使用此之外只有當你不想改變你的標記。

最好的解決方案是與HTML的語義和風格。正如加雷斯指出的那樣，這種方式並不正確。

在您的按鈕

<button type="button" onclick="buttonClick(event);">Click Me!</button> 

function buttonClick(e) { 
      alert('button clicked'); 
      e.preventDefault(); 
     }

來源

2013-10-10 09:55:10

的情況下，引進一個的onclick對於文本字段，並使用stoppropagation方法來處理事件。爲前，

textfield.onclick = function(e) { 
e.stopPropagation(); 
}

另一個替換的是什麼，你想實現

來源

2013-10-10 12:59:37

在錨點標記頂部顯示交互式Html元素

回答

相關問題