覆盖 <tr> 点击时,在单个单元格中切换模态


Overriding <tr> onclick, toggle modal in single cell

我有一个表格,其中每一行都可以使用

 echo "<tr class='"trlink'" onclick='"location.href='".$row['task_id']."''">'n";

那里没有问题。

然后,我在此行的一个单元格内有三个链接。 指向不同页面的两个工作正常。 但是,有一个链接可以切换模式对话框,它不会与标签中包含的onclick一起显示。 没有它就可以正常工作。 我使用以下内容作为

<a role='"button'" href='"#" . $row['task_id'] . "taskModal'" data-toggle='"modal'">

每当单击该链接时,它都会直接转到分配给 的 href。我认为问题在于事件冒泡。 我做了一些谷歌搜索,发现了一个小的Javascript脚本来取消点击模态触发器时的冒泡:

function cancelIt(evt) {
var e = (typeof evt != 'undefined') ? evt : event;
e.cancelBubble = true;
}

<a href='"...'" onclick='"cancelIt(event);'" >

在模式触发器上

这解决了单击时加载初始链接的问题,但是模态也不会显示。

感谢您的任何帮助。

如果你使用 jQuery 检测你的页面,我不建议使用 onclick 事件。请改用以编程方式分配的click处理程序。这可以确保您不会意外踩到某些东西。

如果没有更多详细信息(也许是jsfiddle),很难确定您的特定问题是什么,但是您可以尝试的一件事是将某种选择器添加到适当的锚标记中,然后使用类似于以下内容的范例:

<script>
  $(function() {
    $('#anchorTagICareAbout').click(function(e) {
      e.preventDefault();
      displayModalDialog();
    });
  });
</script>

您可以简单地使用"onmousedown"事件。

<a role='"button'" href='"#" . $row['task_id'] . "taskModal'" data-toggle='"modal'" 
onmousedown='"event.cancelBubble=true;event.returnValue=false;document.location.hash=this.getAttribute('href').replace('#','');return false;'">

这里有一个小演示jsfiddle:http://jsfiddle.net/r4dnp/6/

始终首选使用正确的脚本分配的事件处理程序,但上述方法将完成工作。代码的关键部分:

document.location.hash=this.getAttribute('href').replace('#','')

将 document.location.hash 设置为等于链接 HREF 的任何值。

我有一个可行的解决方案。 这可能是一种黑客方法,但它有效。 注意 我还将模态<div>移到<tr>之外,因为当我关闭模态时,它将遵循<tr>的原始 onclick 事件。

<script type="text/javascript">
var trlink = true;
</script>

上面设置了一个变量,单击tr onclick时要检查。

<tr onclick='"if(trlink) {location.href='google.com'} else { trlink = true; }>

这将在打开链接之前检查 trlink 是否为真,如果不是,则将其设置为 true。

<a onclick="trlink = false" role="button" href="#1printerModal" data-toggle="modal">None</a>

最后,这会在此标记中执行任何操作之前将 trlink 变量设置为 false。

我无法正确处理事件,但这似乎可以解决问题。