HTML組件的交互事件設計

Faremax 發布于2019-08-01 14:38 / 3020人閱讀

摘要：傳統的事件監聽方式通常使用對元素添加事件監聽，比如很自然的，用戶在使用組件時也會想到這種用法，試圖直接在上添加監聽，結果出現問題，正確的寫法應該是這樣組件的交互事件設計思路這樣設計的目的，是保持模型與視圖的分離，在組件中對象是，，則是，原則

傳統的HTML事件監聽方式

通常使用on***對HTML元素添加事件監聽，比如

button.onclick = function(evt){
  console.log(evt);
}

很自然的，用戶在使用Qunee組件時也會想到這種用法，試圖直接在Node上添加onclick監聽，結果出現問題，正確的寫法應該是這樣

graph.onclick = function(evt){
  var element = evt.getData();
  Q.log(element);
}

組件的交互事件設計思路

這樣設計的目的，是保持模型與視圖的分離，在Qunee組件中Graph對象是View，Node，Edge則是Model，原則上Model部分應該保持純粹的數據，不知道View的存在，同一個Model可能綁定多個View，如果直接在Model層添加監聽，該對哪個View起作用呢？交互依賴于View，所以交互應該在View層面上處理

MVP設計模式

自然引申到一個更高級的話題——設計模式，不在Node上提供onclick監聽的根本原因是設計模式，從下面的示意圖可以看出，交互是View層面的東西

組件交互設計實踐 原生HTML事件現存的問題

原生的HTML事件存在些問題，比如單擊與雙擊不區分，沒有拖拽事件，手持設備上，Touch事件與傳統的桌面事件不統一，以拖拽交互為例，桌面版需要監聽mousedown, mousemove, mouseup，手機版則需要監聽touchdown, touchmove, touchend, touchcancel等，且MouseEvent與TouchEvent屬性也很不一樣，造成麻煩。此外手持設備上提供的事件太原始，沒有雙擊事件，手勢支持非常有限，幾乎所有的Web APP應用都會對事件做些處理，也有第三方實現的，如：hammer.js

設計新的事件類型

為了解決不統一的問題，Qunee組件時對事件類型做了封裝，定義了一套統一的事件類型

以拖拽為例，事件派發順序為：onstart -> startdrag -> ondrag -> enddrag -> onrelease，桌面鼠標操作也會派發同樣的事件，start, release這樣的命名不是首創，參照了hammer.js的命名

事件屬性

新的事件類型，帶來新的屬性，比如drag操作時，可以直接從事件對象中獲取拖拽偏移量，拖拽速度等，雙指捏合分開時，可以獲取中心點以及縮放變化量

使用示例

介紹一個彈出菜單的例子，桌面環境通常使用右鍵菜單，但手持設備中并沒有右鍵，所以統一改用長按彈出的方式，下面的例子就是通過監聽長按事件（onlongpress），顯示一個面板

var graph = new Q.Graph("canvas");

var hello = graph.createNode("Hello", -100, -50);
hello.image = Q.Graphs.server;
var qunee = graph.createNode("Qunee", 100, 50);
var edge = graph.createEdge("Hello
Qunee", hello, qunee);

function getPageXY(evt){
    if (evt.touches && evt.touches.length) {
        evt = evt.touches[0];
    }
    return {x: evt.pageX, y: evt.pageY};
}
var menu = document.createElement("div");
menu.style.position = "absolute";
menu.style.width = "100px";
menu.style.padding = "10px";
menu.style.backgroundColor = "#EEE";
menu.style.display = "none";
document.body.appendChild(menu);

graph.onlongpress = function (evt) {
    var data = evt.getData();
    if(!data){
        return;
    }
    var xy = getPageXY(evt);
    menu.style.left = xy.x + "px";
    menu.style.top = xy.y + "px";
    menu.innerHTML = data.name;
    menu.style.display = "block";
}
graph.onstart = function(){
    menu.style.display = "none";
}

運行效果

運行效果可參考demo.qunee.com

云服務器 GPU云服務器組件交互交互事件 html的點擊事件 html的鼠標事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/49497.html

理解vue中的組件（二）

摘要：往往定義組件的構造器后，不需要手動的進行初始化，而是在其他組件的模板中當成標簽來使用，這時候需要調用注冊成組件。這樣設計的目的是防止從子組件意外改變父級組件的狀態，從而導致應用的數據流向難以理解。上節說到組件https://segmentfault.com/a/1190000009236700，這一節繼續來學習組件：原文博客地址，歡迎學習交流:點擊預覽從github上獲取本文代碼：...

Nino 2019-08-23 12:11 評論0 收藏0
我是如何設計 Upload 上傳組件的

摘要：組件設計的目標是解決用戶上傳文件的便利性，但是中后臺組件的場景是多種多樣的，所以可擴展能力是組件不可忽視的另一方面。我們可能的期望是在任何瀏覽器下交互和都一致的組件。由此我們做出了兩個通用的組件文件選擇器。 Upload 組件設計的目標是解決用戶上傳文件的便利性，但是中后臺 Upload 組件的場景是多種多樣的，所以可擴展能力是 Upload 組件不可忽視的另一方面。同樣為了大家能夠...

malakashi 2019-08-23 15:19 評論0 收藏0
微信小程序初探

摘要：在微信小程序中，要更新視圖就只能修改，而視圖層也只能通過事件向邏輯層傳遞交互信息。頁面移植到微信小程序要修改的地方也還比較多，主要是標簽和的交互及小程序提供的功能部分。小程序是一種不需要下載安裝即可使用的應用，它實現了應用「觸手可及」的夢想，用戶掃一掃或搜一下即可打開應用。也體現了「用完即走」的理念，用戶不用關心是否安裝太多應用的問題。應用將無處不在，隨時可用，但又無需安裝卸載。 —...

teren 2019-08-20 13:57 評論0 收藏0
【譯】前端練級攻略

摘要：由于系統變得越來越復雜，人們提出了稱為預處理器和后處理器的工具來管理復雜性。后處理器在由預處理器手寫或編譯后對應用更改。我之前建議的文章，，也涵蓋了預處理器相關的知識。譯者：前端小智原文：medium.freecodecamp.org/from-zero-t… medium.freecodecamp.org/from-zero-t… 我記得我剛開始學習前端開發的時候。我看到了很多文章及...

wuyumin 2019-05-22 16:41 評論0 收藏0