How we can make a div placed inside a link tag to be non-navigated

Admin 1
Viewed 78

I am having a tile. Clicking anywhere on it should redirect to a new page.I have kept my complete code inside Link tag so that whenever i will click on any part of that div, it will navigate to the new page. But inside that Link tag, there is a subdiv, clicking on which i don't want to perform redirection. The problem i am facing is that if i will close the link tag before that particular div on which i don't want to perform redirection then, remaining area of the parent div is also becoming non-clickable except the written p tags. How i can make only that particular div non-redirectable.

       <Link to={{ pathname: '/demo_summary/'>
            <div className="ctd-tile" style={{ margin: "10px", height"260px" }}>
              <p>VERSION: {i.version}</p><br />
              <p>Complexity: {i.complexity}</p><br />

              <div className="col-md-4">}}>
                  <img src={require("../images/icon1.png")} title="DEMO PLAN" /></Link>
              </div>

              <div className="col-md-4">
                <input type="image"  title="View HTML" src={require("../images/viewAsHtml.png")} style={{width: "40%", cursor: "pointer"}} onClick={(e) => { e, that.openReport(e, i.demoName) }}/>
              </div>

              <div className="col-md-4">
                <Download file={i.name} content={text}>
                  <img src={require("../images/download.png")} title="DOWNLOAD" style={{ width: "25%", cursor: "pointer" }} />
                </Download>
              </div>
            </div>
          </Link>

I want to make second div having title as "View HTML" to be non-redirectable.

react-router-dom reactjs html
2 Answers

You need to use event.stopPropagation on the onClick of the div you want to stop redirecting.

When you have nested tags, if you click on one tag, you will trigger the onClick of the tag and the parent onClick too.

function App() {

  return (
    <div onClick={() => console.log('parent onClick')} >
      <button onClick={() => console.log('button click')}>Click me</button>
    </div>
  )
}

const rootElement = document.getElementById("app");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

But if you use event.stopPropagation on the children div. The parent tag wont have it onClick event triggered. 

function App() {

  return (
    <div onClick={() => console.log('parent onClick')} >
      <button onClick={e => {
        e.stopPropagation()
        console.log('button onClick')
        }}>Click me</button>
    </div>
  )
}

const rootElement = document.getElementById("app");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

So now you know that, just add e.stopPropagation() to the onClick of the div you don't want to trigger the Link's onClick.

Edit:

Your code have something very weird

onClick={(e) => { e, that.openReport(e, i.demoName) }} // ????

But what you should do is 

onClick={(e) => { 
    e.stopPropagation();
    that.openReport(e, i.demoName);
}}

Here is the full code

<div className="col-md-4"             
    onClick={(e) => { 
          // added stopPropagation in the correct place
          e.stopPropagation();
          that.openReport(e, i.demoName);
     }}
>
    <input 
        type="image"  
        title="View HTML" 
        src={require("../images/viewAsHtml.png")} 
        style={{width: "40%", cursor: "pointer"}} 
        onClick={(e) => { 
          // added stopPropagation in the correct place
          e.stopPropagation();
          that.openReport(e, i.demoName);
        }}
    />
</div>
user_91191860

Pass the history to your component as prop then use push to redirect or stop the event with

e.stopPropagation();

Example:

const navigation = ({ history }) => {
      return (
        <div>
          <a
            onClick={() => {
              history.push("/cool");
            }}
          >
            rediction
            <span
              onClick={e => {
                e.stopPropagation();
              }}
            >
              none redirection
            </span>
          </a>
        </div>
      );
    };
user_72534510
Related