如何知道 OpenUI5 中的列表元素是 ctrl-clicked 还是 shift-clicked？答案

【问题标题】：How to know if a List Element in OpenUI5 is ctrl-clicked or shift-clicked?如何知道 OpenUI5 中的列表元素是 ctrl-clicked 还是 shift-clicked？
【发布时间】：2018-06-01 08:38:54
【问题描述】：

发送到 itemPress 处理程序的事件不是鼠标事件，而是特定的 sap itemPress 事件。我没有找到如何从这个事件对象中获取 ctrlKey 的状态。

观点：

<List showSeparators="None" items="..." id="browserList" itemPress="onEntityPress" />

处理程序：

Controller.prototype.onEntityPress = function (event) {
  if (event.ctrlKey) { // => undefined property
    // do something
  }
}

我在网络上的研究中没有找到这方面的信息。
请问，有人有想法吗？提前致谢！

【问题讨论】：

我从来没有在那个程度上检查过 UI5 事件，但是无论框架（或香草）如何，鼠标事件都不会发送键盘键代码。我想你可以独立检查它们。你想做什么？
我只是想在单击列表元素时按下 ctrlKey 执行不同的操作。
@Ch.Kuhn 是否打算实施范围选择（Shift + 鼠标单击）？在这种情况下，它现在从 UI5 1.69 (commit) 开始支持开箱即用。否则，恐怕您必须扩展 List 控件才能将按键事件公开给应用程序

标签： list event-handling mouseevent sapui5 ctrl

【解决方案1】：

库恩

这是实现这一目标的一种方法

    <!DOCTYPE HTML>
    <html>

    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="UTF-8">
        <title>App Title</title>
        <script id="sap-ui-bootstrap"
                type="text/javascript"
                src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
                data-sap-ui-theme="sap_belize"
                data-sap-ui-libs="sap.m"
                data-sap-ui-xx-bindingSyntax="complex">
        </script>
      <script>
      sap.ui.define(["sap/m/List", "sap/m/StandardListItem", "sap/ui/model/json/JSONModel"],
                  function(List, StandardListItem, JSONModel) {
      "use strict";

      List.extend("MyList", {
        metadata: {
          events: {
            ctrlClick: {},
            shiftClick: {}
          }
        },
        renderer: {}
      });

      StandardListItem.extend("MyItem", {
        renderer: {},
        onAfterRendering: function() {
          var that = this;
          var oList = this.getParent();
          var cntrlIsPressed = false;
          var shiftIsPressed = false;

          if (StandardListItem.prototype.onAfterRendering) {
            StandardListItem.prototype.onAfterRendering.apply(this, arguments);
            var $this = this.$();
            $this.keydown(function(event) {
              cntrlIsPressed = (event.which === 17);
              shiftIsPressed = (event.which === 16);
            });
            $this.keyup(function() {
              cntrlIsPressed = false;
              shiftIsPressed = false;
            });
            $this.click(function(event) {
              if (cntrlIsPressed) {
                oList.fireCtrlClick({
                  item: that
                })
              } else if (shiftIsPressed) {
                oList.fireShiftClick({
                  item: that
                })
              }
            });
          }
        }
      });

      var oList = new MyList({
        items: {
          path: "/items",
          template: new MyItem({
            title: "{name}"
          })
        },
        shiftClick: function(oEvent) {
          console.log(oEvent.getParameter("item"));
        }
      });

      oList.setModel(new JSONModel({
        items: [
          {name: "abc" }
        ]
      }));

      oList.placeAt('content');
    });
      </script>
    </head>

    <body class="sapUiBody" role="application">
        <div id="content"></div>
    </body>

    </html>

http://jsbin.com/jegehobehi/edit?html,output

【讨论】：