কিভাবে একটি উপাদান বাইরে একটি ক্লিক সনাক্ত?
এই প্রশ্নটি এত জনপ্রিয় এবং এর অনেক উত্তর রয়েছে যে কারণে এটি ছদ্মবেশী জটিল। প্রায় আট বছর এবং কয়েক ডজন জবাবের পরেও, অ্যাক্সেসযোগ্যতায় কীভাবে সামান্য যত্ন দেওয়া হয়েছে তা দেখে আমি সত্যই অবাক হয়েছি।
ব্যবহারকারীরা মেনুগুলির অঞ্চলের বাইরে ক্লিক করলে আমি এই উপাদানগুলি আড়াল করতে চাই।
এটি একটি মহৎ কারণ এবং এটিই আসল সমস্যা। প্রশ্নের শিরোনাম - যা সর্বাধিক উত্তরগুলি সম্বোধন করার চেষ্টা করে বলে মনে হচ্ছে - এতে একটি দুর্ভাগ্যজনক লাল শিবির অন্তর্ভুক্ত রয়েছে।
ইঙ্গিত: এটি "ক্লিক" শব্দ !
আপনি আসলে ক্লিক হ্যান্ডলারগুলিকে আবদ্ধ করতে চান না।
আপনি যদি ডায়ালগটি বন্ধ করতে ক্লিক হ্যান্ডলারদেরকে আবদ্ধ করেন, আপনি ইতিমধ্যে ব্যর্থ হয়েছেন। আপনি ব্যর্থ হওয়ার কারণ হ'ল প্রত্যেকে clickইভেন্টগুলি ট্রিগার করে না। মাউস ব্যবহার না করা ব্যবহারকারীরা টিপে আপনার ডায়লগটি (এবং আপনার পপ-আপ মেনুটি তর্কযুক্ত এক ধরণের ডায়ালগ) থেকে পালাতে সক্ষম হবে এবং Tabপরবর্তীকালে তারা কোনও clickইভেন্ট ট্রিগার না করে ডায়ালগের পিছনে থাকা সামগ্রীটি পড়তে সক্ষম হবে না ।
সুতরাং আসুন প্রশ্নটি নতুন করে বলি।
কোনও ব্যবহারকারী এটির সাথে কাজ শেষ করে কীভাবে একটি ডায়ালগ বন্ধ করবেন?
এই লক্ষ্য। দুর্ভাগ্যক্রমে, এখন আমাদের userisfinishedwiththedialogইভেন্টটি বাঁধতে হবে , এবং সেই বাঁধাই এত সোজা নয়।
সুতরাং আমরা কীভাবে সনাক্ত করতে পারি যে কোনও ব্যবহারকারী একটি ডায়ালগ ব্যবহার করে শেষ করেছেন?
focusout ঘটনা
ফোকাসটি ডায়ালগটি রেখে গেছে কিনা তা নির্ধারণ করা একটি ভাল শুরু।
ইঙ্গিত: blurইভেন্টটি সম্পর্কে সাবধানতা অবলম্বন করুন , blurইভেন্টটি বুদবুদ পর্যায়ে আবদ্ধ থাকলে প্রচার করবেন না!
jQuery এর focusoutঠিক ঠিক করতে হবে। আপনি যদি jQuery ব্যবহার না করতে পারেন, তবে আপনি blurক্যাপচারিং পর্বের সময় ব্যবহার করতে পারেন :
element.addEventListener('blur', ..., true);
// use capture: ^^^^
এছাড়াও, অনেক কথোপকথনের জন্য আপনাকে ধারকটিকে ফোকাস পাওয়ার অনুমতি দিতে হবে। tabindex="-1"অন্যথায় ট্যাব ফ্লোতে বাধা না দিয়ে ডায়ালগটিকে গতিময়তার জন্য ফোকাস পাওয়ার অনুমতি যোগ করুন ।
$('a').on('click', function () {
$(this.hash).toggleClass('active').focus();
});
$('div').on('focusout', function () {
$(this).removeClass('active');
});
div {
display: none;
}
.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div>
আপনি যদি এক মিনিটেরও বেশি সময় ধরে সেই ডেমোটির সাথে খেলেন তবে আপনার সমস্যাগুলি দ্রুত দেখা শুরু করা উচিত।
প্রথমটি হ'ল সংলাপের লিঙ্কটি ক্লিকযোগ্য নয়। এটিতে বা এটিতে ক্লিক করার চেষ্টা করার ফলে মিথস্ক্রিয়াটি সংঘটিত হওয়ার আগে ডায়ালগটি বন্ধ হয়ে যায়। এটি কারণ কারণ অভ্যন্তরীণ উপাদান ফোকাস focusoutএকটি focusinইভেন্ট আবার ট্রিগার আগে একটি ইভেন্ট ট্রিগার ।
ঠিকঠাকটি হ'ল ইভেন্টের লুপে রাষ্ট্র পরিবর্তনকে সারি করুন। এটি ব্যবহার করে setImmediate(...)বা setTimeout(..., 0)সমর্থন করে না এমন ব্রাউজারগুলির মাধ্যমে করা যেতে পারে setImmediate। একবার সারিবদ্ধ হয়ে গেলে এটি পরবর্তীকালে বাতিল করা যেতে পারে focusin:
$('.submenu').on({
focusout: function (e) {
$(this).data('submenuTimer', setTimeout(function () {
$(this).removeClass('submenu--active');
}.bind(this), 0));
},
focusin: function (e) {
clearTimeout($(this).data('submenuTimer'));
}
});
$('a').on('click', function () {
$(this.hash).toggleClass('active').focus();
});
$('div').on({
focusout: function () {
$(this).data('timer', setTimeout(function () {
$(this).removeClass('active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this).data('timer'));
}
});
div {
display: none;
}
.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div>
দ্বিতীয় সমস্যাটি হ'ল লিঙ্কটি আবার চাপলে ডায়ালগটি বন্ধ হবে না। কারণ ডায়ালগটি মনোযোগ হারায়, ঘনিষ্ঠ আচরণকে ট্রিগার করে, তারপরে লিঙ্ক ক্লিকটি ডায়ালগটি আবার খোলার জন্য ট্রিগার করে।
পূর্ববর্তী ইস্যুর মতো, ফোকাসের রাষ্ট্রটি পরিচালনা করা দরকার। রাষ্ট্র পরিবর্তনটি ইতিমধ্যে সারি করা হয়েছে তা প্রদত্ত, ডায়লগটি ট্রিগারকে কেন্দ্র করে ইভেন্টগুলি সামলানোর বিষয়টি কেবল:
এটি পরিচিত দেখা উচিত
$('a').on({
focusout: function () {
$(this.hash).data('timer', setTimeout(function () {
$(this.hash).removeClass('active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this.hash).data('timer'));
}
});
$('a').on('click', function () {
$(this.hash).toggleClass('active').focus();
});
$('div').on({
focusout: function () {
$(this).data('timer', setTimeout(function () {
$(this).removeClass('active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this).data('timer'));
}
});
$('a').on({
focusout: function () {
$(this.hash).data('timer', setTimeout(function () {
$(this.hash).removeClass('active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this.hash).data('timer'));
}
});
div {
display: none;
}
.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div>
Esc মূল
যদি আপনি ভেবে থাকেন যে আপনি ফোকাসের রাজ্যগুলি পরিচালনা করে কাজটি করেছেন তবে ব্যবহারকারীর অভিজ্ঞতা সহজ করার জন্য আরও অনেক কিছুই করতে পারেন।
এটি প্রায়শই একটি "বৈশিষ্ট্যযুক্ত" বৈশিষ্ট্যযুক্ত তবে এটি সাধারণ যে আপনার যখন কোনও ধরণের মডেল বা পপআপ থাকে তখন Escকীটি এটি বন্ধ করে দেবে।
keydown: function (e) {
if (e.which === 27) {
$(this).removeClass('active');
e.preventDefault();
}
}
$('a').on('click', function () {
$(this.hash).toggleClass('active').focus();
});
$('div').on({
focusout: function () {
$(this).data('timer', setTimeout(function () {
$(this).removeClass('active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this).data('timer'));
},
keydown: function (e) {
if (e.which === 27) {
$(this).removeClass('active');
e.preventDefault();
}
}
});
$('a').on({
focusout: function () {
$(this.hash).data('timer', setTimeout(function () {
$(this.hash).removeClass('active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this.hash).data('timer'));
}
});
div {
display: none;
}
.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div>
আপনি যদি জানেন যে ডায়ালগটির মধ্যে আপনার ফোকাসযোগ্য উপাদান রয়েছে, আপনার ডায়ালগটি সরাসরি ফোকাস করার প্রয়োজন হবে না। আপনি যদি একটি মেনু তৈরি করে থাকেন তবে পরিবর্তে আপনি প্রথম মেনু আইটেমটি ফোকাস করতে পারেন।
click: function (e) {
$(this.hash)
.toggleClass('submenu--active')
.find('a:first')
.focus();
e.preventDefault();
}
$('.menu__link').on({
click: function (e) {
$(this.hash)
.toggleClass('submenu--active')
.find('a:first')
.focus();
e.preventDefault();
},
focusout: function () {
$(this.hash).data('submenuTimer', setTimeout(function () {
$(this.hash).removeClass('submenu--active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this.hash).data('submenuTimer'));
}
});
$('.submenu').on({
focusout: function () {
$(this).data('submenuTimer', setTimeout(function () {
$(this).removeClass('submenu--active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this).data('submenuTimer'));
},
keydown: function (e) {
if (e.which === 27) {
$(this).removeClass('submenu--active');
e.preventDefault();
}
}
});
.menu {
list-style: none;
margin: 0;
padding: 0;
}
.menu:after {
clear: both;
content: '';
display: table;
}
.menu__item {
float: left;
position: relative;
}
.menu__link {
background-color: lightblue;
color: black;
display: block;
padding: 0.5em 1em;
text-decoration: none;
}
.menu__link:hover,
.menu__link:focus {
background-color: black;
color: lightblue;
}
.submenu {
border: 1px solid black;
display: none;
left: 0;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
}
.submenu--active {
display: block;
}
.submenu__item {
width: 150px;
}
.submenu__link {
background-color: lightblue;
color: black;
display: block;
padding: 0.5em 1em;
text-decoration: none;
}
.submenu__link:hover,
.submenu__link:focus {
background-color: black;
color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li class="menu__item">
<a class="menu__link" href="#menu-1">Menu 1</a>
<ul class="submenu" id="menu-1" tabindex="-1">
<li class="submenu__item"><a class="submenu__link" href="http://example.com/#1">Example 1</a></li>
<li class="submenu__item"><a class="submenu__link" href="http://example.com/#2">Example 2</a></li>
<li class="submenu__item"><a class="submenu__link" href="http://example.com/#3">Example 3</a></li>
<li class="submenu__item"><a class="submenu__link" href="http://example.com/#4">Example 4</a></li>
</ul>
</li>
<li class="menu__item">
<a class="menu__link" href="#menu-2">Menu 2</a>
<ul class="submenu" id="menu-2" tabindex="-1">
<li class="submenu__item"><a class="submenu__link" href="http://example.com/#1">Example 1</a></li>
<li class="submenu__item"><a class="submenu__link" href="http://example.com/#2">Example 2</a></li>
<li class="submenu__item"><a class="submenu__link" href="http://example.com/#3">Example 3</a></li>
<li class="submenu__item"><a class="submenu__link" href="http://example.com/#4">Example 4</a></li>
</ul>
</li>
</ul>
lorem ipsum <a href="http://example.com/">dolor</a> sit amet.
ডাব্লুআইএআইএআরএ ভূমিকা এবং অন্যান্য অ্যাক্সেসযোগ্যতার সমর্থন
এই উত্তরটি এই বৈশিষ্ট্যের জন্য অ্যাক্সেসযোগ্য কীবোর্ড এবং মাউস সমর্থনের মূল বিষয়গুলি কভার করে, তবে এটি ইতিমধ্যে বেশ বড় আকারের হিসাবে আমি ডব্লিউএআই-এআরআইএর ভূমিকা এবং বৈশিষ্ট্যগুলির কোনও আলোচনা এড়াতে যাচ্ছি , তবে আমি অত্যন্ত সুপারিশ করছি যে প্রয়োগকারীরা বিশদটির জন্য বিশদটি উল্লেখ করুন তাদের কোন ভূমিকা গ্রহণ করা উচিত এবং অন্য কোনও উপযুক্ত বৈশিষ্ট্য on