Javascript 禁用表数据中控件的单击事件

我在一个表数据中有一个控件列表，它作为父标记包含在一个div标记中，我想禁用“打开电源”和“关闭电源”按钮上的单击事件。目前，如果我点击按钮，请求将从我的网站发送到物联网。我想禁用这两个项目上的单击事件

下面是我的代码的样子：

<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网站上运行

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

我希望显示完全相同，除了打开电源和关闭电源时的单击事件不应起任何作用

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

请提供帮助。

您可以在链接上添加禁用的类。然后使用css或javascript禁用与该类的链接：

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

---

请记住css解决方案的使用方法。

如果我使用第二种看起来更干净的方法，我的代码将如何更改，或者除了脚本标记外，它将与您描述的相同？考虑到浏览器的兼容性，第一个选项就可以了，好吗？所以这更可取。是吗？只需添加一个禁用类或其他类，并在代码中引用它们-js或css。关于兼容性，你是对的。我选择了第一种更安全的方法，它的效果很好：。。。我对你昨天和今天的帮助感激不尽：上帝保佑！！！