Question

我正在开发一个统一商店，在详细信息页面中，用户必须在选择尺寸之前选择模型。在他/她选择模型之前，将禁用尺寸选择框。我想要的是，即使禁用大小框并且用户在选择模型之前尝试单击它，模型框也会变为红色。

我尝试使用onclick事件，但是，当禁用该框时，它不会执行任何操作。（我也在这个网站上使用SAPUI5，我不认为这有任何问题）。仅作为测试，我做了这个：

oSelectTamanho = new sap.m.Select();
oSelectTamanho.onclick = function() {
    console.log("click");
}

正如我所提到的，它只在启用该框时输出“click”，并且在禁用该框时我需要这样做。

你知道我怎么能做到这一点？

谢谢。

娃。

Answer 1

如您所见，disabled元素不会产生events。使用覆盖元素是一种可能的解决方案。使用叠加div的示例。

CSS

#wrapper {
    display:inline-block;
    position:relative;
}
#overlay {
    display:none;
    width:100%;
    height:100%;
    position:absolute;
    top:0
    left:0;
    bottom:0;
    right:0;
}
#cars:disabled + #overlay {
    display:block;
}

HTML

<button id="button">Enable</button>
<div id="wrapper">
    <select id="cars" disabled>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
    <div id="overlay"></div>
</div>

的Javascript

var button = document.getElementById('button'),
    cars = document.getElementById('cars'),
    overlay = document.getElementById('overlay');

button.addEventListener('click', function () {
    cars.disabled = !cars.disabled;
    if (cars.disabled) {
        button.textContent = 'Enable';
    } else {
        button.textContent = 'Disable';
    }
}, true);

cars.addEventListener('change', function (evt) {
    console.log(evt.target.value);
}, true);

overlay.addEventListener('click', function () {
    alert('Disabled');
}, true);

在jsFiddle

上

Answer 2

以下是使用单个 SAPUI5 框架 API (oElement.addEventDelegate) 的工作示例：https://jsbin.com/zuramop/edit?js,output。

<块引用>

myDisabledControl.addEventDelegate({
  onclick:/*or ontap: */() => alert("Select that other item first!"),
});

^{（有关其他可用事件，请参阅 API reference of sap/ui/events/ControlEvents.events。）}

请不要直接操作UI5控件的HTML元素！

禁用元素Javascript中的onclick事件

2 个答案: