在链接元素中创建元素而不是链接

Question

<li id = 'search'<?php if(strcmp($PageType,'Search') == 0){print("class='active'");} ?> 
    onclick = "location.href = '<?php $AdvSearchRoot = $Root . "/search/advancedsearch.php"; echo $AdvSearchRoot; ?>'">
    <form id = 'searchform' action = '<?php $SearchRoot = $Root . "/search/search.php"; echo $SearchRoot; ?>' method = 'get'>
        <input type = 'text' id = 'searchBox' name = 'searchTerm' placeholder = 'Search' required></input>
        <input type = 'submit' value = 'submit'></input>
        <a id = 'AdvancedSearch' href = '<?php echo $AdvSearchRoot;?>'>Advanced Search</a>  
    </form> 
</li>

基本上我希望能够单击表单上的输入，而不会将我带到li元素中的链接。

上面的代码输出：

Answer 1

让点击处理程序更改位置而不影响表单输入的一种方法是检查单击元素的标记名。如果是列表项，则更改位置（否则不执行任何操作）。

<li id = 'search'<?php if(strcmp($PageType,'Search') == 0){print("class='active'");} ?> 
onclick = "if (event.target.tagName.toUpperCase() == 'LI') location.href = '<?php $AdvSearchRoot = $Root . "/search/advancedsearch.php"; echo $AdvSearchRoot; ?>'">

这利用点击处理程序的隐式事件参数，以及event.target及其属性.tagName，加上String.toUppercase()来检查标记名称点击的元素。

见this plunker中演示的内容。