Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> HTML

HTML DOM टचस्टार्ट इवेंट


टच स्क्रीन को छूने पर HTML DOM टचस्टार्ट इवेंट ट्रिगर हो जाता है।

ध्यान दें - यह इवेंट केवल टच डिवाइस के लिए है।

निम्नलिखित सिंटैक्स है -

HTML में ट्रिगर टचस्टार्ट इवेंट -

ontouchstart = "eventFunction()"

जावास्क्रिप्ट में ट्रिगर टचस्टार्ट घटना -

eventObject.ontouchstart = eventFunction

नोट - हमने मोबाइल पर एक्सेस किए गए ऑनलाइन HTML एडिटर्स या टच एक्सेस वाले सिस्टम पर टच इवेंट के उदाहरण चलाए। ऐसा इसलिए किया जाता है ताकि हम 2 सेकंड के लिए स्क्रीन को टच करने जैसे टच ऑपरेशन कर सकें।

आइए देखें टचस्टार्ट इवेंट . का एक उदाहरण संपत्ति -

उदाहरण

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM touchstart 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-touchstart-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>

आउटपुट

'होल्ड ऑन' . को छूने से पहले बटन -

HTML DOM टचस्टार्ट इवेंट

स्क्रीन को छूने के बाद ‘होल्ड ऑन’ बटन -

HTML DOM टचस्टार्ट इवेंट


  1. HTML DOM TouchEvent संपत्ति को छूता है

    एचटीएमएल डोम टचइवेंट स्पर्श संपत्ति स्पर्श सतह पर ट्रिगर किए गए सभी संपर्क बिंदुओं की सूची के अनुरूप एक टचलिस्ट ऑब्जेक्ट देता है। नोट:यदि निर्दिष्ट नोड या उसके किसी भी चाइल्ड नोड पर कोई स्पर्श ट्रिगर होता है, तो निम्न स्पर्शों की गणना की जाएगी, भले ही वे एक ही नोड पर ट्रिगर न हों। निम्नलिखित वाक्य

  1. एचटीएमएल डोम उल ऑब्जेक्ट

    एचटीएमएल में एचटीएमएल डोम उल ऑब्जेक्ट . का प्रतिनिधित्व करता है तत्व। एक बनाना तत्व var ulObject = document.createElement(“UL”) यहां, “ulObject” निम्न गुण हो सकते हैं लेकिन HTML5 . में समर्थित नहीं हैं - संपत्ति विवरण कॉम्पैक्ट इससे सेट/रिटर्न होता है कि क्या अनियंत्रित सूची

  1. एचटीएमएल डोम घटना प्रकार संपत्ति

    HTML DOM इवेंट टाइप प्रॉपर्टी इवेंट के प्रकार जैसे क्लिक, कीप्रेस, लोड या टचएंड के अनुरूप एक स्ट्रिंग लौटाती है। निम्नलिखित वाक्य रचना है - ट्रांज़िशन चलने वाले सेकंड की वापसी संख्या - event.type आइए ईवेंट प्रकार . का एक उदाहरण देखें संपत्ति - उदाहरण <!DOCTYPE html> <html> <head>