使用 Javascript/JQuery 以编程方式禁用嵌套 Div 中的 OnClick答案

【问题标题】：Disabling the OnClick in a nested Div programmatically with Javascript/JQuery使用 Javascript/JQuery 以编程方式禁用嵌套 Div 中的 OnClick
【发布时间】：2017-06-29 10:17:59
【问题描述】：

我有一个 Javascript 应用程序，它允许用户在运行时启用/禁用控件。我已成功禁用/启用嵌套输入和按钮，但到目前为止，我还没有成功禁用 Div 中的 onclick 事件，因此圆圈图标将无法选择：

生成的 HTML 如下所示：

<div id="56f81c3d-9666-4dab-8f35-d36e894f426f" class="field alert-success">
    <div class="field-name">By default I am disabled - Single Photo</div>
        <div id="56f81c3d-9666-4dab-8f35-d36e894f426fPhoto" class="clearfix" style="cursor: pointer; max-width: 100%; max-height: 100%;" onclick="ffffield.getFieldHandler('PhotoPicker').showPhotoCapture(this, '56f81c3d-9666-4dab-8f35-d36e894f426f');">
            <img class="pull-right" src="/MySite.Web/Content/device/images/chevronRight.png" style="width: 20px; position:relative; top: 7px;">
            <img class="pull-right" src="/MySite.Web/Content/device/images/photoPickerPlaceholder@2x.png" style="width: 40px; position:relative; top: -5px;">
        </div>
    </div>
</div>.

在这个 sn-p 中，我需要禁用“onclick”。我并不挑剔 - 它可以禁用指针或 onclick。

我已经尝试了以下尝试来完成这项工作：

$("#56f81c3d-9666-4dab-8f35-d36e894f426f").children().off('click');

和

$("#56f81c3d-9666-4dab-8f35-d36e894f426f input").prop("disabled", true);

和

$("#"#56f81c3d-9666-4dab-8f35-d36e894f426f input").attr("disabled", true);

和

$(""#56f81c3d-9666-4dab-8f35-d36e894f426f input").attr("disabled", "disabled");

基于其他一些 stackoverflow 问题。

【问题讨论】：

stackoverflow.com/questions/18982642/…
div[disabled] { pointerEvents : none; }
@epascarello 感谢您的回复。我在上面的堆栈流中尝试了接受的答案。 jquery设置禁用指针的方法是什么？
使用 css() .....

标签： javascript jquery html disabled-input

【解决方案1】：

.off() 只能禁用使用.on()（或其他jQuery 方法，因为它们都在内部调用.on()）添加的事件侦听器。要移除使用onclick 属性添加的事件侦听器，您需要重新分配onclick 属性：

$("#56f81c3d-9666-4dab-8f35-d36e894f426f").children().prop('onclick', null);

【讨论】：

这就像一个魅力。既然用户可以切换它，我该如何重新启用它？
将旧值保存在变量中。
不幸的是，我无法保存最后一个值，因为可能有数百个这样的实例（除非我构建一个全新的构造）。但是我可以在原地重新生成相同的方法。在这种情况下会怎样？ $("#" + targetField.id).on('click', "ffffield.getFieldHandler('PhotoPicker').showPhotoCapture(this,'" + targetField.id + "Photo');"); targetField.id 在哪里 #56f81c3d-9666-4dab-8f35-d36e894f426f？
您真的需要删除处理程序吗？为什么不设置一个变量，处理函数在做任何事情之前检查它？
我可能会跳过处理程序的删除——实际上我想知道禁用控件的指针是否会更好。至于变量......我可以，但是我需要构建一个由 Id 索引的标志数组，因为可能有数百个这样的字段。只是为了禁用控件似乎有点矫枉过正。

【解决方案2】：

试试这个代码：

function disableDiv( div ) {
    div.addEventListener( "click", function ( event ) {
        event.stopPropagation();
    }, true );
}

// call the disable div handler
disableDiv( document.getElementById( "56f81c3d-9666-4dab-8f35-d36e894f426f" ) );

【讨论】：