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

Question

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

在此代码段中，这是我需要禁用的“ 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问题。

Answer 1

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

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

Answer 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" ) );