iT邦幫忙

0

javascript 要如何做到所有物件的事件先經過驗證才執行

請問有可能讓document 中的所有物件,不管是text or textarea or div etc..,只要有dblclick就先去執行一個validation的function,當validation 回傳true時,才執行原element所設定的ondblclick事件。

dblclick 有可能是寫html inline script,也有可能是透過jquery 的on 方法binding的。

看更多先前的討論...收起先前的討論...
fillano iT邦超人 1 級 ‧ 2019-01-17 09:08:58 檢舉
如果你需要的是表單驗證,可以找一些專門做表單驗證的工具,例如:
https://github.com/posabsolute/jQuery-Validation-Engine

雖然程式也很老了XD
watercool iT邦新手 5 級 ‧ 2019-01-17 09:13:04 檢舉
比較簡單的做法是宣告一個全域的validation function, 在每個dblclick的function內都先call這個validation function, 之後再執行原本的dblclick事件
gmlin iT邦新手 5 級 ‧ 2019-01-17 09:34:23 檢舉
抱歉,可能問題沒有描述清楚.....

目前系統頁面都是早已開發好的,約有數百支頁面,現在多了一個需求是只要頁面上有double-click的動作,就必須經過驗證才能work

所以如果是要宣告一個全域的validation function,這樣我要改數千個javascript function把call validation的code塞進去才行。

這是我最後一個方案,如果無法透過類似servlet的方法去攔在event trigger跟execution code中間的話....那就只能土法煉鋼了....每個function慢慢改
fillano iT邦超人 1 級 ‧ 2019-01-17 09:55:34 檢舉
如果是所有事件都要,應該是沒有這麼親切的東西XD,我也不確定DOM裡面的各種Event是否可以改寫。
gmlin iT邦新手 5 級 ‧ 2019-01-17 10:25:31 檢舉
親切的東西~~XDDD
我需要他~~~
fillano iT邦超人 1 級 ‧ 2019-01-17 10:33:58 檢舉
你試一下可不可以用event delegation的方式做:
http://jsfiddle.net/fillano/unyawfx4/33/

我是綁在click,判斷如果e.target是第一個button才放行。因為是在document的click事件的capturing phase攔截(第三個參數為true),所以所有的click觸發都會攔截到。

1 個回答

0
wingkawa
iT邦新手 4 級 ‧ 2019-01-17 09:25:41
最佳解答

像這樣?
感覺很浪費資源就是了。

<body>
<form action='#'>
<input type='text' ondblclick='console.log("text ondblclick")'/>
<input type='submit' value='test' />
</form>
</body>

<script type="text/javascript">
window.onload = function() {
    // 所有物件
    var allElements = document.getElementsByTagName("*");
    // 自行改條件來取得要被加function的element

    for (var i = 0; i < allElements.length; i++) {
        let element = allElements[i];
        let originalFunction = element.ondblclick;
        if (typeof originalFunction !== "function") {
            originalFunction = function() {};
        }
        element.ondblclick = function(event) {
            // do something
            console.log(element.tagName + " dblclicked!");
            // 先看某個驗證function是否回傳 true
            if (true) {
                // 再執行原本寫好的 ondblclick
                originalFunction();
                // 停止事件冒泡
                event.stopPropagation();
            }	
        }
    }
}
</script>
gmlin iT邦新手 5 級 ‧ 2019-01-17 10:23:17 檢舉

加入這段script執行後,console印出的順序是
text ondblclick
addon obdblclick

但我需要的功能是要先印出addon ondblclick再印出text ondblick

請問這有辦法達成嗎?

<script type="text/javascript">
var allElements = document.getElementsByTagName("*");

for (var i = 0; i < allElements.length; i++) {
	let element = allElements[i];
    element.ondblclick = function(event) {
		// do something
		console.log("addon dblclicked!");
		// 停止事件冒泡
		event.stopPropagation();
	}
}
</script>
</head>
<body>
<form action='#'>
<input type='text' ondblclick='console.log("text ondblclick")'/>
<input type='submit' value='test' />
</form>
</body>
wingkawa iT邦新手 4 級 ‧ 2019-01-17 11:16:22 檢舉

我有編輯回答了,你試試看

gmlin iT邦新手 5 級 ‧ 2019-01-17 13:56:52 檢舉

可以了 感謝

我要發表回答

立即登入回答