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

我有一个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>.

及

及

及

基于其他一些stackoverflow问题。

.off（）

只能禁用使用

.on（）

添加的事件侦听器（或其他jQuery方法，因为它们都在内部调用

.on（）

）。要删除使用

onclick

属性添加的事件侦听器，需要重新指定

onclick

属性：

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

请尝试以下代码：

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

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

---

div[disabled]{pointerEvents:none；}

@epascarello感谢您的回复。我在上面的堆栈流上尝试了接受的答案。设置禁用指针的jquery方法是什么？使用css（）……这很有效。既然用户可以切换，我该如何重新启用它？将旧值保存在变量中。不幸的是，我无法保存最后一个值，因为可能有数百个实例（除非我构建一个全新的构造）。但我可以在适当的地方重新生成相同的方法。在这种情况下会是什么样子$（“#”+targetField.id）.on（'click'，“ffffield.getFieldHandler（'PhotoPicker'））.showPhotoCapture（此，“+targetField.id+”Photo'）；”；targetField.id的位置是#56f81c3d-9666-4dab-8f35-d36e894f426f？是否确实需要删除处理程序？为什么不在做任何事情之前设置一个处理程序函数检查的变量呢？我可能可以跳过处理程序的删除-事实上，我想知道禁用控件的指针是否会更好。至于一个变量…我可以，但是我需要构建一个由Id索引的标志数组，因为可能有数百个这样的字段。只是为了禁用一个控件，这看起来有点过头了。

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

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

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

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

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