1

I have a 'list' entry for each item in an array. Each item is sent to a React component to be rendered. In this component, I am wrapping everything in a div, and I have added an 'onClick' method to this div. I would like to select some text on the UI when visiting the site, which I can, but as soon as I release my mouse the div is clicked and I am led to another site (which is intended). Am I able to somehow still have the entire div clickable but also be able to copy text from the div without activating the clickable attribute?

I've tried converting the div into a button, but it has not yielded me any promising results.

<div className="entry" onClick = { () => { this.clicked(); } }>
    <div className="details">
       <p className="entry-para">{name}</p>
       <div className="other-info">
        ...... other stuff
       </div>
    </div>
</div>

The output is a nicely formatted rectangle (which is all clickable) with some information text inside (for example, {name}). I would like to be able to click and highlight and copy {name} or other text displayed on the div.

Some Guy
  • 351
  • 1
  • 4
  • 20
  • maybe yo should forbid the redirect with one click and put an event to redirect on double click – axel axel Jun 07 '19 at 13:02
  • You can refer https://stackoverflow.com/questions/31982407/prevent-onclick-event-when-selecting-text – Ashish Jun 07 '19 at 13:02
  • @josemartindev It has nothing to do with jquery here. When your click event gets triggered, just check if there is selection or not. If not, do op else return. – Ashish Jun 07 '19 at 13:05

0 Answers0