在 Table 数据中禁用控件的点击事件

Question

我在 table 数据中有一个控件列表，它包含在作为父标签的 div 标签中，我想禁用我的开机和关机按钮上的点击事件.目前，如果我单击按钮，就会从我的网站向 IOT 发送请求。我想禁用这两个项目的点击事件。

我的代码如下所示：

<table class="pure-table pure-table-horizontal" style="width: 90%;">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Device Name</th>
                        <th>Status</th>
                        <th>Temperature (&#176; C)</th>
                        <th align="left">Action</th>
                    </tr>
                    </thead>

                    <tbody>

                    <% devices.forEach(function(device, i){ %>
                    <tr>
                        <td><%= (i + 1) %></td>
                        <td>
                            <%= device.name || device.macAddress %>
                        </td>
                        <td id="text_<%= device.id %>">
                            <% if (device.updateInProgress) { %>
                            <i class="fa fa-spinner fa-spin"></i>
                            <% } else if (device.powerState == false) { %>
                            <%= "Powered off" %>
                            <% } else if (device.startState == true) { %>
                            <%= "Running" %>
                            <% } else { %>
                            <%= "Not running" %>
                            <% } %>
                        </td>
                        <td>
                            <% if (device.updateInProgress){ %>
                            N/A
                            <% } else if (device.powerState) { %>
                            <div class="pure-g">
                                <div class="pure-u-1-4">
                                    <%= device.temperature %>
                                </div>

                                <!--I tried commenting this to remove temperature edit icon for single device-->

                                <!--<div class="pure-u-1-4">-->
                                    <!--<i class="fa fa-pencil-square-o" id="set_temp" data-value="<%= device.id %>"></i>-->
                                <!--</div>-->


                            </div>
                            <% } else { %>
                            N/A
                            <% } %>
                        </td>
                        <td align="left">
                            <a href='/user/startOff/<%= device.id %>?boxid=<%= id %>'
                               class="pure-button button-green <%= device.updateInProgress == true ? 'hidden' : device.powerState == false ? 'hidden' : device.startState == false ? 'hidden' : '' %>"
                               type="button">Start Off</a>

                            <a href='/user/startOn/<%= device.id %>?boxid=<%= id %>'
                               class="pure-button button-green <%= device.updateInProgress == true ? 'hidden' : device.powerState == false ? 'hidden' : device.startState == true ? 'hidden' : '' %>"
                               type="button">Start On</a>

                            <a href='/user/powerOff/<%= device.id %>?boxid=<%= id %>'
                               class="pure-button button-warning <%= device.updateInProgress == true ? 'hidden' : device.powerState == true ? '' : 'hidden' %>"
                               type="button">Power Off</a>

                            <a href="/user/powerOn/<%= device.id %>?boxid=<%= id %>"
                               class="pure-button <%= device.updateInProgress == true ? 'hidden' : device.powerState == true ? 'hidden' : '' %>"
                               type="button">Power On</a>

                            <a href="/user/deleteDevice/<%= device.id %>?boxid=<%= id %>"
                               class="pure-button button-error pull-right <%= device.updateInProgress == true ? 'hidden' : '' %>"
                               type="button ">
                                <i class="fa fa-times"></i>
                            </a>

                        </td>
                    </tr>
                    <% }) %>

                    </tbody>

                </table>

这是运行在 Node.js 网站上的全部内容。

理想情况下，这是当前代码的屏幕外观：

我希望显示完全相同，只是 "Power On" 和 "Power Off " 上的点击事件什么都不做。

我想删除“”，我知道这是为了使 link 或 URL 处于活动状态。但是没有它我无法适应代码。

请帮忙。

Answer 1

您可以在 link 上添加 class disabled。然后使用 css 或 javascript 禁用 links 与 class:

<a href="/user/powerOn/<%= device.id %>?boxid=<%= id %>" 
class="disabled pure-button <%= device.updateInProgress == true ? 'hidden' :device.powerState == true ? 'hidden' : '' %>"
type="button">Power On</a>

<script>
    $('body').on('click','a.disabled', function(e){
       e.preventDefault();
    })
</script>

<!-- OR -->

<style>
  a.disabled{
    cursor: not-allowed;
    pointer-events: none;

  }
</style>

请记住 browser compatibility 的 css 解决方案。

在 Table 数据中禁用控件的点击事件

Disabling click event of Controls in Table Data

html

javascript

css

ejs