我们如何使放置在链接标签内的 div 不被导航

Posted 2023-02-22

【中文标题】我们如何使放置在链接标签内的 div 不被导航

【英文标题】：How we can make a div placed inside a link tag to be non-navigated

【发布时间】：2019-10-21 23:14:59

【问题描述】：

我有一块瓷砖。单击它的任何地方都应该重定向到一个新页面。我将完整的代码保存在 Link 标记中，这样每当我单击该 div 的任何部分时，它都会导航到新页面。但是在那个链接标签里面，有一个细分，点击它我不想执行重定向。 我面临的问题是，如果我将在我不想执行重定向的特定 div 之前关闭链接标签，则父 div 的剩余区域也变得不可点击，除了写入的 p 标签。我如何才能使那个特定的 div 不可重定向。

       <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>

我想让标题为“查看 HTML”的第二个 div 不可重定向。

【参考方案1】：

将 history 作为 prop 传递给您的组件，然后使用 push 重定向或停止事件

e.stopPropagation();

示例：

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

【参考方案2】：

您需要在要停止重定向的div 的onClick 上使用event.stopPropagation。

当你有嵌套标签时，如果你点击一个标签，你会触发标签的onClick和父onClick。

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>

但如果您在子 div 上使用 event.stopPropagation。父标签不会触发onClick 事件。

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>

所以现在您知道了，只需将e.stopPropagation() 添加到您不想触发Link 的onClick 的div 的onClick。

编辑：

你的代码有些奇怪

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

但你应该做的是

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

这是完整的代码

<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>

【讨论】：

e.stopPropagation() 没有帮助

@AnjaliChaudhary 检查代码 sn-p。父级是Link，按钮是不重定向的div。如果它不起作用，请解释你在做什么，也许你在错误的地方添加它

e.stopPropagation() > e, that.openReport(e, item.modelName) />

在 div 上我只有单个 onClick。第二次点击是针对我添加到该 div 的图像，在其自己的点击中，我正在调用一个不同的函数，该函数负责执行 api 调用和其他功能。

也将stopPropagation添加到图片中？