SAPUI5 不處理禁用的 HTML 元素中的 onclick 事件

Question

我正在開發 SAPUI5 應用程序。 在頁面中，用戶必須在他/她從select_B 中選擇之前從select_A 中選擇一個項目。 在他/她從select_A 中選擇之前， select_B框被禁用。

我想要的是：即使select_B框被禁用，並且用戶在從select_A選擇之前嘗試單擊它， select_A框也應該變成紅色。

我嘗試使用onclick事件，但是，當該框被禁用時，它什么也不做。

僅作為測試，我做了這個：

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

正如我提到的，它只在框啟用時輸出“點擊”，當框被禁用時我需要這個。

你知道我怎么能做到這一點嗎？

Answer 1

這是一個使用單個 SAPUI5 框架 API ( oElement.addEventDelegate ) 的工作示例： https : oElement.addEventDelegate ? oElement.addEventDelegate 。

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

^{（有關其他可用事件，請參閱sap/ui/events/ControlEvents.events的API 參考。）}

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

Answer 2

如您所見， 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 上