খাঁটি সিএসএসে ক্লিক বোমা ও লিঙ্কগুলি কীভাবে অক্ষম করবেন?

Question

আমি কেবল এইচটিএমএল এবং সিএসএসে (কোনও জাভাস্ক্রিপ্ট নয়) দৃষ্টিভিত্তিক গতিশীল এবং ইন্টারেক্টিভ অভিজ্ঞতা তৈরি করার জন্য নিজেকে চ্যালেঞ্জ জানিয়েছি। এখনও অবধি, আমার প্রয়োজনীয় কোনও বৈশিষ্ট্য আমি আসেনি যা আমি খাঁটি সিএসএস এবং এইচটিএমএল-তে করতে পারি না। এটি সম্ভবত কিছুটা বেশি কঠিন।

আমাকে ব্যবহারকারীকে ডাবল-ক্লিক থেকে আটকাতে হবে <a>,<input type="submit"> এবং <button>ট্যাগ। এটি তাদের কোনও ফর্ম ডাবল জমা দেওয়ার বা দুর্ঘটনাক্রমে কোনও ইউআরএলে 2 জিইটি অনুরোধ করা বাধা দেওয়ার জন্য। খাঁটি সিএসএসে এটি কীভাবে করা যায়? এমনকি আমরা disabledজেএস ছাড়াই সেট করতে না পারলেও এখানে কিছু মাস্কিং কৌশল বা শৈলীর সংমিশ্রণ থাকতে হবে যা এটি 2020 এ এখানে পরিচালনা করতে পারে।

এখানে একটি প্রচেষ্টার একটি সাধারণ উদাহরণ:

.clicky:focus{
  display: none;
  pointer-events: none;
}

<a href="#down" class="clicky">test</a>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p id="down">target</p>

দুর্ভাগ্যক্রমে, আসল ক্লিক ইভেন্টটি কোনও কারণে চালিত হওয়ার আগে এটি এটি অক্ষম করে। হতে পারে অ্যাঙ্করগুলি পরীক্ষার সেরা উপায় নয়? আমি আরও চেষ্টা চালিয়ে যাব।

Comments

প্রথমবার জমা দেওয়ার পরে আপনি কি ফর্মটিকে একটি শ্রেণি দিতে পারেন?

— সিগস্ট্যাকফোল্ট

সম্ভবত pointer-events: allডিফল্টরূপে তবে সক্রিয় বা: ফোকাসের রাজ্যে নেই? pointer-events: noneএই রাজ্যের জন্য সেট পছন্দ ?

— জেরেমি হ্যারিস

el:active, el:focusপয়েন্টার-ইভেন্টগুলির সাথে মিলিত হতে পারে

— প্যারাগন 512

এটা কি কাজ করে? : সক্রিয় {প্রদর্শন: কিছুই নয়; // উদাহরণস্বরূপ}

— এমডি হেসারী

যুক্ত প্রচেষ্টা। ক্লিকটি গুলি চালানোর আগে এটি এটি অক্ষম করে।

— প্যারাগন 512

Answer 1

একটি ধারণা হ'ল দ্বিতীয় স্তরটি এড়াতে প্রথম ক্লিকের পরে উপাদানটির শীর্ষে আসা একটি স্তর থাকা।

এখানে একটি বেসিক ধারণা যেখানে আমি হ'ল 1sদুটি ক্লিকের মধ্যবর্তী সময়কে বিবেচনা করব যা আপনি হ্রাস করতে পারবেন। বোতামটি / লিঙ্কটি ক্লিক করার চেষ্টা করুন এবং আপনি লক্ষ্য করবেন যে আপনি কেবল পরে ক্লিক করতে পারেন 1s।

কৌশলটি আরও ভালভাবে দেখতে আমি একটি ছোট ওভারলে যুক্ত করছি

.button {
  position:relative;
  display:inline-block;
}
.button span{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:100%;
  z-index:-1;
  animation:overlay 1s 0s; /* Update this value to adjust the duration */
  transition:0s 2s; /* not this one! this one need to be at least equal to the above or bigger*/
}


.button *:active + span {
  animation:none;
  bottom:0;
  transition:0s 0s;
}

@keyframes overlay {
  0%,100% {
    z-index:999;
    background:rgba(255,0,0,0.2); /* To illustrate */
  }
}

<div class="button">
  <button>Click me</button>
  <span></span>
</div>

<div class="button">
  <a href="#" onclick="console.log('clicked !')">Click me</a>
  <span></span>
</div>

Comments

এটি <a>ট্যাগ নিয়ে কাজ করছে বলে মনে হচ্ছে না

— আলেকজান্ডার বেলুগিন

@ আলেকসান্ডারবেলগিন এটি ঠিকঠাক কাজ করছে, আপডেটটি দেখুন। হতে পারে আপনি কিছু ভুল করেছেন

— তেমনী আফিফ

আমার মনে হয় এটি এখনও আমাকে 2 বার বোতামটি ক্লিক করতে দেয়? আমি দ্বিতীয় বার বোতামটি দেখতে পাচ্ছি।

— প্যারাগন 512

@ টেমনিএফিফ যখন আমি <a href="#" onclick="console.log('lalala')">Click me</a>কোডের বাকী অংশের সাথে সংযোগ করার জন্য কিছুই করি না তবে কনসোলে লগ হয় না।

— imho এর

দেখে মনে হচ্ছে এটি পরীক্ষার সর্বোত্তম <a>উপায়টি ট্যাগ সহ। আমি সাবমিট বাটনগুলির সাথে পরীক্ষার চেষ্টা করেছি কিন্তু নেটওয়ার্ক পরিদর্শকের নিরীক্ষণটি অদ্ভুত এবং বেমানান। আমি যখন লিঙ্কটি ক্লিক করি, এটি ক্লিকটি আগুন দেয় না। যদি আপনি কোনও অ্যাঙ্কারে লক্ষ্য স্থির করে এবং লিঙ্কটি ক্লিক করেন তবে এটি লিঙ্কটি অক্ষম করবে তবে অ্যাঙ্কারে ঝাঁপিয়ে পড়বে না।

— প্যারাগন 512 19

Answer 2

প্রথম সমাধান

ধারণাটি হল পরিবর্তনগুলি করার জন্য radio buttonরাষ্ট্রকে ব্যবহার করা :checked। আমরা লুকিয়ে radioবৃত্ত এবং কখন :checkedজন্য <a>করতে pointer-events: none;এবং জন্য buttonsবিভিন্ন ধরনের আমরা তাদের আড়াল এবং প্রদর্শন সঙ্গে disabledবেশী।

div {
  margin: 10px;
}

#radio0, .my-checkbox {
  position: absolute;
  height: 0;
  width: 0;
  opacity: 0;
}

#radio0 + a label {
  cursor: pointer;
}

#radio0:checked+a {
  pointer-events: none;
}

.btn-one,
.btn-two {
  padding: 0;
}

.btn-one>label,
.btn-two>label {
  padding: 1px 6px;
}

.my-checkbox:checked+.btn-one {
  display: none;
}

.btn-two {
  display: none;
}

.my-checkbox:checked+.btn-one+.btn-two {
  display: inline-block;
}

<div>
  <input id="radio0" type="radio" onclick="console.log('radio0 clicked!')">
  <a href="#">
    <label for="radio0">
        Click the link!
      </label>
  </a>
</div>

<div>
  <input type="radio" id="radio1" class="my-checkbox">
  <button type="button" class="btn-one" onclick="console.log('radio1 clicked!')">
      <label for="radio1">Click the button!</label>
    </button>
  <button type="button" class="btn-two" onclick="console.log('radio1 NOT clicked!')" disabled>
        <label for="radio1">Click the button!</label>
      </button>
</div>

<div>
  <input type="radio" id="radio2" class="my-checkbox">
  <button type="submit" class="btn-one" onclick="console.log('radio2 clicked!')">
    <label for="radio2">Submit!</label>
  </button>
  <button type="submit" class="btn-two" onclick="console.log('radio2 NOT clicked!')" disabled>
      <label for="radio2">Submit!</label>
    </button>
</div>

দ্বিতীয় সমাধান

এই এক জন্য মামলা links। ধারণাটি ব্যবহার করা হয় :target। লক্ষ্যটি elementপ্রথম লুকানো থাকে। তারপর যখন না ব্যবহার পরিকল্পনা রয়েছে :targetকরার pointer-events: none;এর <a>।

#anchor {
  display: none;
}

#anchor:target {
  display: block;
}

#anchor:target+a {
  pointer-events: none;
}

<div>
  <span id="anchor"></span>
  <a href="#anchor" onclick="console.log('anchor clicked!')">Click the link!</a>
</div>