Question

我有一个表，其中每行可以使用

进行点击

 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);\" >

关于模态触发器

这解决了点击时加载初始链接的问题，但是模态也没有显示。

感谢您的帮助。

Answer 1

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

如果没有更多细节（也许是一个jsfiddle），很难确定你的特定问题是什么，但你可以尝试的一件事是将某种选择器添加到适当的锚标签，然后使用类似于以下的范例：

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

  });
</script>

Answer 2

您可以简单地使用“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链接的值。

Answer 3

我有a working solution。这可能是一种破解方式，但它确实有效。注意我还将模态<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，如果没有，则将其设置为true。

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

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

我无法让事件处理的东西正确，但这似乎可以解决问题。

覆盖onclick，在单个单元格中切换模式

3 个答案: