Question

我正在尝试使用可排序行的表 - 但其中一行还需要一个下拉列表。

问题是，当点击下拉列表时 - 表标题的click事件会触发，导致事情发生，而不应该发生。

我发现了这个：

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

Answer 1

将onclick事件添加到选择和停止传播（FireFox）或停止冒泡（IE）。这是我使用的示例代码。

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

用TH点击下拉点击，而不是下拉列表

1 个答案: