下拉与TH点击触发TH点击，而不是下拉

Dropdown with TH onclick firing TH click, NOT dropdown

本文关键字：TH 点击      更新时间：2023-09-26

我试图有一个表排序行-但也这些行之一需要在它下拉。

问题是，当单击下拉菜单时，表头的单击事件正在触发，导致不应该发生的事情。

我发现了这个:

http://www.velocityreviews.com/forums/t367867-table-row-background-onclick.html

但是我想——一定有更优雅的解决方案吧?

人吗?

对不起-我忘了例子!

    <th onclick="SortBy(event,'ctl00$mainContent$hiddenPBButton','descending','1')" class="tableDataHeader">
        <select id="groupby1"` onchange="performPostBackfromDrop(event,this,'ctl00$mainContent$hiddenPBButton');"><option value="Enquiry Type">Enquiry Type</option>
           <option value="Location">Location</option>
           <option value="Source">Source</option>
           <option selected="" value="User">User</option>
        </select>
    </th>

JS

正如你所看到的- JS是相当通用的-但我已经包括它为清晰

function SortBy(e, PBID,direction, field)
{
    performPostBackfromSort(PBID,direction,field);
}
function performPostBackfromSort(PBID, direction, field)
{
    __doPostBack(PBID, "sort"+"-"+direction+"-"+field);
} 
function performPostBackfromDrop(e,sender, PBID)
{
  var value = getDropDownSelectedValue(sender);
  __doPostBack(PBID, $j(sender).attr('id')+"-"+value);
}

为选择和停止传播(FireFox)或停止冒泡(IE)添加一个onclick事件。下面是我使用的示例代码:

<html>
<head>
<title>test</title>
<script>
function divOnclick(event)
{
    alert("Div onclick");
}
function selectOnclick(event)
{
    stopPropagation(event);
}
function selectOnchange(event)
{
    alert("Select onchange");
}
function stopPropagation(ev)
{
    ev = ev||event;
    ev.stopPropagation? ev.stopPropagation() : ev.cancelBubble = true;
}
</script>
</head>
<body>
    <div id="test" style="width:200px;height:200px;" onclick="divOnclick(event)">
        <select id="groupby1"` onclick="selectOnclick(event);" onchange="selectOnchange(event);">
           <option value="Enquiry Type">Enquiry Type</option>
           <option value="Location">Location</option>
           <option value="Source">Source</option>
           <option selected="" value="User">User</option>
        </select>
    </div>
    </body>
</html>
相关文章：