javascript - 禁用 displayTag 中的超链接

Question

我正在使用 displayTag 表装饰器来显示我的 JSP 页面。

该页面有一个包含列的表格。其中一列是“操作”，其中显示了 2 个超链接。一是工资，二是接近。每行将有 5 列操作，最后一列带有超链接。

这是JSP中的 Action 显示代码

<display-el:column property="action" sortable="false" title=" "
                            class="defaultTextCentered" style="width:6%" sortName="action" />

下面是我的装饰器代码

public String getAction() {
  renderPayLink();
}

private void renderPayLink() {
  decoratedVal.append("<a href=\"javascript:newPopup('");
  decoratedVal.append(getContextPath());
  decoratedVal.append("/abc/taxPaymentInternal.html?iSeqNo=");
  decoratedVal.append(abc.getISeqNumber());
  decoratedVal.append("&iPeriod=");
  decoratedVal.append(abc.getIDate());
  decoratedVal.append("', 800, 700)\" title=\"Pay\">Pay</a>");
  decoratedVal.append("&nbsp;&nbsp;");        
}

因此，单击链接时将打开一个弹出窗口，让用户输入一些详细信息并提交。当此弹出窗口打开时，我仍然可以转到主浏览器并再次单击“付款”，这会刷新弹出窗口并使我再次重新提交信息。单击浏览器然后打开弹出窗口后，我必须通过禁用付费按钮来阻止这种情况发生。我怎样才能实现这个目标？

将工资替换为

  decoratedVal.append("', 800, 700)\" title=\"Pay\" ");
  decoratedVal.append("onclick=\"this.setAttribute(");
  decoratedVal.append("\'style\', \'pointer-events:none; cursor:default;\'); this.setAttribute("); 
  decoratedVal.append("\'href\', \'\')\">Pay</a>");
  decoratedVal.append("&nbsp;&nbsp;");

从 f12 调试中获取“无法获取未定义或空引用的属性‘setAttribute’”错误。

   <a title="Pay" onclick="this.setAttribute('style', 'pointer-events:none; cursor:default;'); this.setAttribute('href', '')" href="javascript:newPopup('/mei/invoicing/launchConfirmPaymentInternal.html?invoiceSeqNo=131946&amp;invoicePeriod=02-11-2017', 800, 700)">Pay</a>

Answer 1

一种方法是禁用 <a>当您点击它时标记。

简单的解决方案:

您可以替换此行:

decoratedVal.append("', 800, 700)\" title=\"Pay\">Pay</a>");

与那些:

decoratedVal.append("', 800, 700)\" title=\"Pay\")
decoratedVal.append("onclick=\"this.setAttribute(")
decoratedVal.append("\'style\', \'pointer-events:none; cursor:default;\'); this.setAttribute(");
decoratedVal.append("\'href\', \'\')\">Pay</a>");

请注意，该链接将在页面刷新后再次可用。如果您需要其他方式来激活它，则需要手动执行。

更优雅的解决方案:

如果您有样式表(例如 CSS 文件)，您可以在那里创建此类:

.disabledLink{
    pointer-events: none;
    cursor: default;
}

在onclick中链接标记的事件，替换 setAttribute与 addClass('disabledLink') 。这也使得删除变得更容易，使用 removeClass('disabledLink')