无法让 .click() 在禁用的文本区域上工作答案

【问题标题】：Can't get .click() to work on a disabled textarea无法让 .click() 在禁用的文本区域上工作
【发布时间】：2012-07-29 18:13:18
【问题描述】：

我正在使用 jQuery。我有一个禁用的文本区域：<textarea id="textarea" disabled="disabled"></textarea>。我想这样当用户点击文本区域时，它会做一些事情，比如一个警告框。所以，我有$('#textarea').click(function() { alert('Test'); });。

但是，这仅在 textarea 未禁用时有效。那么，即使 textarea 被禁用，我怎样才能触发 click 事件呢？

【问题讨论】：

您可以在按键时将文本设置为“”而不是禁用
stackoverflow.com/questions/3100319/…的可能重复

标签： javascript jquery html textarea

【解决方案1】：

为什么不使用readonly 而不是disabled="disabled"，readyonly 与禁用几乎相同，并且单击事件将起作用

【讨论】：

是的，您甚至可以设置只读文本区域的样式，使其看起来像已禁用。 +1

【解决方案2】：

您可以尝试使用 CSS 模拟禁用行为并继续从中接收鼠标事件，而不是禁用它。

或者看到这个答案Event on a disabled input 其中Andy E 展示了如何在输入顶部放置一个不可见元素（叠加层），以便在禁用输入时接收这些鼠标事件。

他删除了覆盖并在单击时启用输入，但您可以将行为更改为您想要的任何内容。

【讨论】：

【解决方案3】：

禁用的元素不会触发鼠标事件。大多数浏览器会将源自禁用元素的事件向上传播到 DOM 树，因此事件处理程序可以放置在容器元素上。但是，Firefox 不会表现出这种行为，当您单击禁用的元素时，它什么也不做。

你可以这样做：

$(document).on('click', function(e) { 
    if (e.target.id === 'textarea') alert('works');
});

FIDDLE

但它可能不是跨浏览器！

另一种可能更好的方法是将另一个元素放在禁用的元素之上并捕获该元素上的事件，例如：

var t = $("#textarea"),
    over = $('<div</div>');
    over.css({
        position: "absolute",
        top: t.position().top,
        left: t.position().left,
        width: t.outerWidth(),
        height: t.outerHeight(),
        zIndex: 1000,
        backgroundColor: "#fff",
        opacity: 0
    });

t.after(over);

$(over).on('click', function() { 
    alert('works');
});

FIDDLE

【讨论】：

1+ 非常好的和简单的解决方案。
您需要在 CSS 中为 t.css("left"|"top") 的 textarea 指定一个显式的 top 和 left 值才能按预期工作。尝试.offset() 或将left 和top 设置为0px 并将position: relative 应用于textarea 的容器。
@CharlieRudenstål - 几乎任何事情都有办法解决，只是不想花更多时间在上面。编辑了我的答案，应该适用于所有浏览器，并且适用于大多数样式等。
啊。我无意贬低你的回答。对 OP 的暗示比其他任何东西都多。实际上，我要赞成这个解决方案。

【解决方案4】：

禁用的元素不会触发点击事件。这是他们被禁用的一部分。

【讨论】：

【解决方案5】：

您不能从禁用的元素触发点击事件，尽管您可以设置值 e-g：

http://jsfiddle.net/j6tdn/28/

【讨论】：