ডাবল ক্লিকের পরে পাঠ্য নির্বাচন আটকাবেন

Question

আমি আমার ওয়েব অ্যাপ্লিকেশনটিতে স্প্যানের উপর ডাব্লিক্লিক ইভেন্টটি পরিচালনা করছি। একটি পার্শ্ব-প্রতিক্রিয়া হ'ল ডাবল ক্লিক পৃষ্ঠায় পাঠ্য নির্বাচন করে। আমি কীভাবে এই নির্বাচনটি হতে বাধা দিতে পারি?

Answer 1

function clearSelection() {
    if(document.selection && document.selection.empty) {
        document.selection.empty();
    } else if(window.getSelection) {
        var sel = window.getSelection();
        sel.removeAllRanges();
    }
}

আপনি নন-আইই ব্রাউজার এবং আই 10 এর জন্য স্প্যানগুলিতে এই স্টাইলগুলি প্রয়োগ করতে পারেন:

span.no_selection {
    user-select: none; /* standard syntax */
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

Comments

সত্যের পরে নির্বাচন অপসারণের বিপরীতে আসলেই বাধা দেওয়ার কোনও উপায় আছে কি? এছাড়াও, আপনার দ্বিতীয়টি যদি বিবৃতিটি আরও ভাল পাঠযোগ্যতার জন্য থাকে তবে অন্যটির ভিতরে থাকতে পারে।

— ডেভিড

-মজ- (এবং -খ.টি.টি.এম.এল - আপনার যদি বৃহত কনকরার শ্রোতা থাকে) ছাড়াও ওয়েবেকিট-উপসর্গটি (ওয়েবকিট ভিত্তিক ব্রাউজারগুলির জন্য এটি পছন্দসই উপসর্গ) Best

— চোখের পলকহীনতা

এই যেমন IE10 মধ্যে এখন পাওয়া যায় -ms-user-select: none;দেখুন blogs.msdn.com/b/ie/archive/2012/01/11/... @PaoloBergantino

— লেবু

@ টিমহার্পার: একটি লাইব্রেরি ব্যবহার করে জাভাস্ক্রিপ্ট সমাধান যতটা সম্ভব, নিশ্চিত। সত্যিই নিশ্চিত নয় যে কেন এটি একটি নিম্নগামীকে সতর্ক করে।

— পাওলো বার্গান্টিনো

ডাবল ক্লিকে নির্বাচন নিষ্ক্রিয় করা এবং এটি সম্পূর্ণরূপে অক্ষম করার মধ্যে পার্থক্য রয়েছে। প্রথমটি ব্যবহারযোগ্যতা বৃদ্ধি করে। দ্বিতীয়টি হ্রাস পায়।

— রোবো রোবোক

Answer 2

সরল জাভাস্ক্রিপ্টে:

element.addEventListener('mousedown', function(e){ e.preventDefault(); }, false);

বা jQuery সহ:

jQuery(element).mousedown(function(e){ e.preventDefault(); });

Comments

হ্যাঁ, আমি যে সমস্যাটি করছিলাম সে একই সমস্যাটি সমাধান করার জন্য আমি এটি ব্যবহার করেছি (+1), এমনটি return falseব্যবহার event.preventDefault()না করে যা আপনার মোউসডাউনে থাকা অন্য কোনও হ্যান্ডলারকে হত্যা না করে।

— সাইমন পূর্ব

এটি পৃষ্ঠায়

— পাঠ্য

@ জোহানকতেজিক কেবলমাত্র যদি পাঠ্য হয় তবে elementহ্যাঁ।

— ফ্রেগান্ট

এই ইভেন্ট হ্যান্ডলারটি "dblclick" এ নিয়োগের প্রত্যাশা করবে - তবে এটি কার্যকর হয় না, যা এত অদ্ভুত। "মোডাউনডাউন" দিয়ে আপনি অবশ্যই টেনে এনে পাঠ্য নির্বাচন করা থেকে বিরত রয়েছেন।

— corwin.amber

Answer 3

কেবলমাত্র একটি ডাবল ক্লিকের পরে পাঠ্য নির্বাচন প্রতিরোধ করতে:

আপনি MouseEvent#detailসম্পত্তি ব্যবহার করতে পারে । মোডাউনডাউন বা মাউসআপ ইভেন্টগুলির জন্য এটি বর্তমান ক্লিক গণনা 1 টি plus

document.addEventListener('mousedown', function (event) {
  if (event.detail > 1) {
    event.preventDefault();
    // of course, you still do not know what you prevent here...
    // You could also check event.ctrlKey/event.shiftKey/event.altKey
    // to not prevent something useful.
  }
}, false);

Https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail দেখুন

Comments

এটা সত্যিই দারুন! ফায়ারফক্স 53 এ কাজ করে

— জারোথ

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত।

— এখানের সমস্ত কিছুই ওপির

Chrome এও কাজ করে

— KS74

IE 11 উইন্ডোজ 10 =) এও কাজ করে। এটি ভাগ করে নেওয়ার জন্য ধন্যবাদ।

— ফার্নান্দো ভিয়েরা

(event.detail === 2)কেবলমাত্র ডাবল-ক্লিক (এবং ট্রিপল-ক্লিক ইত্যাদি নয়) রোধ করতে ব্যবহার করুন

— রবিন স্টুয়ার্ট

Answer 4

এফডাব্লুআইডাব্লু, আমি সেই শিশু উপাদানগুলির পিতামাতার উপাদানকে সেট করেছি user-select: noneযা পিতামাতার উপাদানটিতে কোথাও ডাবল ক্লিক করার সময় আমি কোনওভাবেই নির্বাচন করতে চাই না। এবং এটি কাজ করে! দুর্দান্ত জিনিস হ'ল contenteditable="true", পাঠ্য নির্বাচন ইত্যাদি এখনও শিশু উপাদানগুলিতে কাজ করে!

তাই মত:

<div style="user-select: none">
  <p>haha</p>
  <p>haha</p>
  <p>haha</p>
  <p>haha</p>
</div>

Comments

ধন্যবাদ, style="user-select: note"সর্বত্র

— গোলমরিচ ইস্যুটি

মূলত আপনি কখনই পাঠ্যটি নির্বাচনযোগ্য হতে চান না এমন ক্ষেত্রে কেবল সিএসএস-এর সমাধান। ধন্যবাদ!

— ইয়ান লাভজয়

Answer 5

একটি সরল জাভাস্ক্রিপ্ট ফাংশন যা কোনও পৃষ্ঠা-উপাদানটির ভিতরে থাকা সামগ্রীকে অনির্বাণিত করে তোলে:

function makeUnselectable(elem) {
  if (typeof(elem) == 'string')
    elem = document.getElementById(elem);
  if (elem) {
    elem.onselectstart = function() { return false; };
    elem.style.MozUserSelect = "none";
    elem.style.KhtmlUserSelect = "none";
    elem.unselectable = "on";
  }
}

Answer 6

কৌণিক 2+ এর সমাধান খুঁজছেন তাদের জন্য ।

আপনি mousedownটেবিল সেলের আউটপুট ব্যবহার করতে পারেন ।

<td *ngFor="..."
    (mousedown)="onMouseDown($event)"
    (dblclick) ="onDblClick($event)">
  ...
</td>

এবং যদি প্রতিরোধ detail > 1।

public onMouseDown(mouseEvent: MouseEvent) {
  // prevent text selection for dbl clicks.
  if (mouseEvent.detail > 1) mouseEvent.preventDefault();
}

public onDblClick(mouseEvent: MouseEvent) {
 // todo: do what you really want to do ...
}

dblclickআশানুরূপ আউটপুট কাজ চলতে থাকে।

Answer 7

বা, মজিলায়:

document.body.onselectstart = function() { return false; } // Or any html object

আইই তে,

document.body.onmousedown = function() { return false; } // valid for any html object as well

Comments

এই একাকীকরণ পাঠ্য নির্বাচন করার অনুমতি দেয় না।

— jmav

@ jmav আপনাকে ফাংশন ওভাররাইডগুলি এর চেয়ে বেশি নির্দিষ্ট উপাদানের উপর প্রয়োগ করতে হবে document.body।

— সাইফার

Answer 8

পুরানো থ্রেড, তবে আমি এমন একটি সমাধান নিয়ে এসেছি যা আমি বিশ্বাস করি যে এটি পরিষ্কার since এটি সোজা, এবং আমার জন্য ভাল কাজ করে। এখানে একটি উদাহরণ; আমি যখন "তীর-ডান" শ্রেণীর সাহায্যে অবজেক্টটিতে বেশ কয়েকবার ক্লিক করি তখন আমি পাঠ্য-নির্বাচন বাধা দিতে চাই:

$(".arrow-right").hover(function(){$('body').css({userSelect: "none"});}, function(){$('body').css({userSelect: "auto"});});

এইচটিএইচ!

Answer 9

আপনি যদি কেবল কোনও ডাবল ক্লিকের পাশাপাশি কোনও পদ্ধতি দ্বারা পাঠ্য নির্বাচনকে পুরোপুরি আটকাতে চাইছেন তবে আপনি user-select: noneCSS বৈশিষ্ট্যটি ব্যবহার করতে পারেন । আমি ক্রোম 68 পরীক্ষা করে দেখেছি, তবে https://caniuse.com/#search=user-select অনুযায়ী এটি অন্যান্য বর্তমানের সাধারণ ব্যবহারকারী ব্রাউজারগুলিতে কাজ করা উচিত।

আচরণগতভাবে, ক্রোম 68৮ এ এটি শিশু উপাদানগুলির দ্বারা উত্তরাধিকার সূত্রে প্রাপ্ত, এবং উপাদানটির আশেপাশে এবং উপাদান সহ পাঠ্য নির্বাচন করা হলেও এমন কোনও উপাদান থাকা পাঠ্য নির্বাচন করার অনুমতি দেয় না।

Answer 10

IE 8 সিটিআরএল এবং শিফট প্রতিরোধের জন্য পৃথক উপাদানগুলিতে পাঠ্য নির্বাচন ক্লিক করুন

var obj = document.createElement("DIV");
obj.onselectstart = function(){
  return false;
}

নথিতে পাঠ্য নির্বাচন প্রতিরোধ করার জন্য

window.onload = function(){
  document.onselectstart = function(){
    return false;
  }
}

Answer 11

আমারও একই সমস্যা ছিল। আমি এটিকে স্যুইচ করে <a>যোগ করে সমাধান করেছি onclick="return false;"(যাতে এটিতে ক্লিক করা ব্রাউজারের ইতিহাসে নতুন এন্ট্রি যুক্ত না করে)।