Question

我有一个以下场景，其中我的tr中有多个td，如下所示代码：

<tr class="tbluplift">
  <td align="left">
     <a href="#">
       <asp:Label ID="lblStd" runat="server" Class="Quote"></asp:Label>
     </a>
  </td>
</tr>

在此，我想禁用td，a和label上的点击，因此要实现此目的，我使用了以下jquery代码：

$('.tbluplift a').each(function () {
    $(this).css("cursor", "default");
    $(this).on('click', function (e) {
        console.log('hi');
        e.preventDefault();
    });
});

$('.tbluplift td').each(function () {
    $(this).css("cursor", "default");
    $(this).on('click', function (e) {
        e.preventDefault();
    });
});

$('.tbluplift span').each(function () {
    $(this).css("cursor", "default");
    $(this).on('click', function (e) {
        e.preventDefault();
    });
});

但是，这段代码似乎对我不起作用。你可能会检查我使用过console.log('hi')，但我的日志中没有任何内容。我想代码在'click'部分中断了。它甚至没有进入它。

有谁知道如何实现这项功能。

提前致谢。

Answer 1

您的代码有效，但您实际上是在点击范围/标签，而不是锚点，因此阻止该级别的点击会阻止它传播到锚点。

最好使用委派的事件处理程序：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/q7mnvoqj/4/

$('.tbluplift').find('td,a,span').css("cursor", "default");

$('.tbluplift').on("click", "td,a,span", function (e) {
    console.log("click");
    e.preventDefault();
});

委派的事件处理程序通过监听点击以冒泡到祖先（在本例中为.tbluplift）来工作，因此只附加了一个处理程序。然后应用jQuery过滤器，然后运行提供的函数来对抗实际导致事件的任何选定元素。

注意，JSFiddle在DOM就绪处理程序中加载代码（默认情况下），因此您可能需要像这样包装代码：

$(function(){ $('.tbluplift').find('td,a,span').css("cursor", "default"); $('.tbluplift').on("click", "td,a,span", function (e) { console.log("click"); e.preventDefault(); }); });

Answer 2

试试这个：

// change cursor css for all elements inside tbluplift
$('.tbluplift').find('a, td,span').css("cursor", "default");

//bind click event for a, td and span inside tbluplift and return false   
$('.tbluplift').on("click","a,td,span",function(e) {
  e.preventDefault();
  return false;
});

<强> Working Demo

Answer 3

尝试这样的事情：

$('td,a,label').click(function(){
  return false;
});

（或者你可以为三个独立的元素做到这一点）

Answer 4

将函数包装在

中

$(document).ready(function() {

//your function
});

并确保启用了jquery。

Answer 5

似乎为我工作......你可以检查这个小提琴：http://jsfiddle.net/wn8fy31e/1/

无论如何，你可以写下这段代码：

$('.tbluplift td a').css("cursor", "default");
$('.tbluplift td a').click(function (e) {
        console.log('hi');
        e.preventDefault();
    });

而不是：

$('.tbluplift a').each(function () {
    $(this).css("cursor", "default");
    $(this).on('click', function (e) {
        console.log('hi');
        e.preventDefault();
    });
});

禁用各种html元素上的click事件

5 个答案: