HTML DOM TouchEvent ऑब्जेक्ट एक ऐसी घटना का प्रतिनिधित्व करता है जो स्पर्श उपकरणों का उपयोग करके HTML दस्तावेज़ तत्वों के साथ सहभागिता करती है।
यहां, “टचइवेंट” निम्नलिखित गुण और विधियाँ हो सकती हैं -
| संपत्ति/विधि <वें>विवरण | |
|---|---|
| altKey | यह स्थिति के अनुरूप एक बूलियन मान देता है यदि atouch ईवेंट को सक्रिय करते समय alt कुंजी दबाया गया था |
| changedTouches | यह टच इवेंट के राज्य परिवर्तन पर ट्रिगर किए गए सभी संपर्क बिंदुओं की सूची के अनुरूप एक टचलिस्ट ऑब्जेक्ट देता है |
| ctrlKey | यह राज्य के अनुरूप एक बूलियन मान देता है यदि एक टचएवेंट को सक्रिय करते समय ctrl दबाया गया था |
| metaKey | यह स्थिति के अनुरूप एक बूलियन मान देता है यदि एक टचएवेंट को सक्रिय करते समय मेटा दबाया गया था |
| shiftKey | यह स्थिति के अनुरूप एक बूलियन मान देता है यदि एक टचएवेंट को निकाल दिया गया था, तो शिफ्ट को दबाया गया था |
| targetTouches | यह एक टच लिस्ट ऑब्जेक्ट देता है जो टच सरफेस पर ट्रिगर किए गए सभी कॉन्टैक्ट पॉइंट्स की सूची के अनुरूप होता है, यदि निर्दिष्ट नोड या उसके किसी भी चाइल्ड नोड पर टच ट्रिगर होता है, तो निम्नलिखित टच केवल तभी गिने जाएंगे जब वे भी ट्रिगर हों एक ही नोड पर |
| स्पर्श करता है | यह एक टचलिस्ट ऑब्जेक्ट लौटाता है, जो एक टच सरफेस पर ट्रिगर किए गए सभी कॉन्टैक्ट पॉइंट्स की सूची के अनुरूप होता है, यदि निर्दिष्ट नोड या उसके किसी भी चाइल्ड नोड पर टच ट्रिगर होता है, तो निम्नलिखित टच की गणना की जाएगी, भले ही वे ट्रिगर न हों। एक ही नोड |
नोट:हमने मोबाइल पर एक्सेस किए गए ऑनलाइन HTML संपादकों या टच एक्सेस वाले सिस्टम पर टच इवेंट उदाहरण चलाए। ऐसा इसलिए किया जाता है ताकि हम 2 सेकंड के लिए स्क्रीन को टच करने जैसे टच ऑपरेशन कर सकें।
आइए हम TouchEvent ctrlKey . का एक उदाहरण देखें संपत्ति -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM TouchEvent ctrlKey</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
legend{
border-color: #dc3545;
}
span {
display: inline-block;
width: 40px;
height: 20px;
margin: 1px;
color: #fff;
border: 3px solid black;
}
div span:nth-child(1){
background-color: #FF8A00;
}
div span:nth-child(2){
background-color: #F44336;
}
div span:nth-child(3){
background-color: #03A9F4;
}
div span:nth-child(4){
background-color: #4CAF50;
}
</style>
</head>
<body>
<form id="formSelect" ontouchstart="eventAction(event)">
<fieldset>
<legend>HTML-DOM-TouchEvent-ctrlKey</legend>
<label for="textSelect">Background Color Changer</label>
<div><span>alt</span><span>Ctrl</span><span>Meta</span><span>Shift</span></div>
<div id="divDisplay">No HotKey Pressed</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var formSelect = document.getElementById("formSelect");
function eventAction(event) {
if(event.ctrlKey){
formSelect.style.backgroundColor = '#F44336';
formSelect.style.color = '#FFF'
divDisplay.textContent = 'ctrl Key Pressed';
}
}
</script>
</body>
</html> आउटपुट
टच इवेंट . को ट्रिगर करने से पहले -
ट्रिगर करने के बाद यहां तक कि स्पर्श करें t ऑल्ट की को दबाने के साथ -
साथ ही, “टचइवेंट " के निम्न प्रकार के ईवेंट हो सकते हैं -
<टेबल><वें>विवरण
आइए ऑनटचेंड इवेंट . का एक उदाहरण देखें संपत्ति -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM touchend event</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 50%;
font-size: 20px;
padding: 20px;
border: 5px solid rgb(220, 53, 69);
background: rgba(220, 53, 69, 0.5);
color: #fefefe;
}
</style></head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-touchend-event</legend>
<label for="textSelect">Game Time</label>
<input type="button" id="gameSelect" value="Hold On">
<div id="divDisplay">Hold On for 1 - sec to Win</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var gameSelect = document.getElementById("gameSelect");
var duration = 1000;
var timer;
gameSelect.ontouchstart = startEventAction;
function startEventAction() {
timer = setTimeout(victory, duration);
}
gameSelect.ontouchend = endEventAction;
function endEventAction(){
if(timer)
clearTimeout(timer);
}
function victory(){
divDisplay.textContent = "You Win"
}
</script>
</body>
</html> आउटपुट
'होल्ड ऑन' . को छूने से पहले बटन -
स्क्रीन को छूने के बाद ‘होल्ड ऑन’ बटन -
