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

jquery event handler javascript

gmlin 2019-01-16 19:18:40 ‧ 1460 瀏覽

分享至

請問有可能讓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觸發都會攔截到。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

wingkawa

iT邦新手 3 級 ‧ 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>

回應 3
分享
檢舉

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>