The option to "open in new tab" is absent from the right-click menu when clicking a link on a website

Why does the option to open a link in a new tab not appear when using JavaScript or jQuery, but it works with an anchor tag? I have tried using window.location and window.open, as well as adding the onclick attribute to a div, but the option still doesn't show up. Does it only work with anchor tags?

div class='miniShell'>          <!-- m1 m2 m3 m4 used for seperate goto links   search if 'mp3' you will find next usage -->
      <div class='mini' onclick="openLink('<?php echo $UrlA?>')"> <img src=''>  <div class="miniTitle"><?php echo ucwords($TitleA) ?></div>   </div>
      <div class='mini' onclick="openLink('<?php echo $UrlB?>')"> <img src=''><div class="miniTitle"><?php echo ucwords($TitleB) ?></div>   </div>
      <div class='mini' onclick="openLink('<?php echo $UrlC?>')"> <img src=''>  <div class="miniTitle"><?php echo ucwords($TitleC) ?></div>   </div>
      <div class='mini' onclick="openLink('<?php echo $UrlD?>')"> <img src=''><div class="miniTitle"><?php echo ucwords($TitleD) ?></div>   </div>
     </div>

using jQuery:

function openLink(link){
                 window.open('http://localhost/mysite/story/'+link,'_self');
             }

Browser:google chrome

Answer №1

An anchor element must be used to create a link, not a div. By replacing the div tag with an a tag, you can achieve the same result as your HTML currently redirects to a specific link but is not recognized as a valid link by the browser.

Answer №2

Building on the previous response by @Rigidity, it's important to note that a window.open is not simply a generic link but a JavaScript method. Because of this distinction, the browser won't recognize it as a traditional link and therefore the context menu typically associated with links won't appear within your div element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A step-by-step guide on smoothly transitioning between elements using Vue-Carousel on a click event

Today marks my first question here and I'm excited! Can anyone guide me on how to implement sliding on click element with Vue-Carousel? I want to slide to the right with just a single click on my input button. Here's the code snippet I have base ...

Function is not triggered in React component

When the LoginPage calls AuthForm, the structure is as follows: function mapDispatchToProps(dispatch: Redux.Dispatch<any>) { return { signUpWithEmail: function(email: string, password: string) { // bla bla }, }; } handleForm ...

Exploring click event beyond React Component: Jest + Enzyme Testing

I am looking to create a Jest and Enzyme test for a component that includes an event listener. The purpose of the test is to ensure that when a mousedown event occurs outside of a specific HTML element, a change is triggered (for example, toggling a state ...

Preventing commits when encountering build or lint errors

Every git repository contains git hooks within the .git/hooks directory. I have included a npm run lint command in the pre-commit git hook. However, I am unable to prevent the commit if npm run lint returns an error. ...

Add an element to the parent body from an iframe with this easy tutorial!

Within the iframe, I have the following code snippet. <script type="text/javascript"> $(document).ready(function(){ $("body").append($("#ctap").html()); }); </script> I am looking to append the HTML content of #ctap to the par ...

"Troubleshooting the issue of Angular JS ng-click HTML being assigned via InnerHTML but not properly invoking

I am currently working on an AngularJS phonegap application. The HTML in this application consists of a blank table that is dynamically populated using JS Ajax. The Ajax request retrieves the necessary data and fills the table using innerHTML. Each button ...

New HTML output is displaying strangely when using jQuery AJAX

My jQuery AJAX function retrieves new HTML content from a PHP script. The PHP script is functioning correctly and sending back the accurate HTML to jQuery. However, when I utilize the html() function, the displayed HTML is incorrect. To verify the returned ...

What could be causing the incorrect display of updates when my Grails checkbox onclick remote function Ajax call is triggered

Hi, I have a page named taskReminder that renders two templates: one for tasks and another for reminders. The task template includes a checkbox that, when checked, should update the task list. Everything is functioning correctly, but there seems to be an i ...

Exploring arrays with JavaScript and reading objects within them

Recently, I received assistance from a member of StackOverflow regarding AJAX calls. However, I have encountered a problem now. The code consists of a loop that sends requests to multiple REST APIs and saves the results in an array as objects. The issue ...

Using Next.js in conjunction with Tailwind CSS and the shadcn/ui library to tackle the issue of preventing overscroll from creating

As I delve into a Next.js project, my goal is to use Tailwind CSS to craft an interface featuring a sidebar on the left, a header at the top, and a main content area. However, an issue has surfaced where users can over-scroll, leading to a blank space appe ...

Ways to transfer information among Angular's services and components?

Exploring the Real-Time Binding of Data Between Services and Components. Consider the scenario where isAuthenticated is a public variable within an Authentication service affecting a component's view. How can one subscribe to the changes in the isAut ...

What is the reasoning behind having two separate permission dialog boxes for accessing the webcam and microphone in flash?

I am currently using a JavaScript plugin known as cameratag () in order to record videos through the web browser. This plugin utilizes a flash-based solution. When the flash application requests permission to access the webcam, it presents a security dialo ...

ClickAwayListener doesn't function correctly when used in conjunction with Collapse or Fade animations

Currently, I am working on implementing a notifications area on my website. The idea is to display a notification icon, and once the user clicks on it, a list of notifications will be shown. For reference, you can view the code in this codesandbox I have ...

Unable to disable background color for droppable element

For my project, I am working with two div boxes. My goal is to make it so that when I drag and drop box002 into another div box001, the background color of box001 should change to none. I have attempted to achieve this functionality using jQuery without s ...

Tips for wrapping a function call that may occasionally involve asynchronous behavior to ensure it runs synchronously

I am dealing with a function that functions as follows: _setDataChunk: function (action) { var self = this; /* some code */ var data = self._getDataChunk(action); populateWidget(data); } Sometimes GetDataChunk cont ...

Creating a customizable range input for pixel values: a step-by-step guide

I am looking to design a pixel range input. Here is an example: let slider = document.querySelector("input"); slider.addEventListener("change", () => { console.log(slider.value); }); <input type="range" min="5px" max="50px"> However, the r ...

Experience the power of Vue Google Chart - Geochart where the chart refreshes seamlessly with data updates, although the legend seems to disappear

I have integrated vue google charts into my nuxt project. Whenever I select a different date, the data gets updated and the computed method in my geochart component correctly reads the new data. However, the legend or color bar at the bottom does not funct ...

"Content in DIV just peeking out from the edge of

After coming across a helpful piece of HTML and jQuery code in response to another question, I've been using it successfully with one small issue. The code allows divs to show and hide, which works perfectly unless the div is positioned near the bott ...

Different ways to contrast rows within ag-grid

I am in the process of comparing two identical rows within my ag-grid and emphasizing any variances between them. While most column values are matching, I wish to highlight any cell that differs from the previous row. Is there a means to achieve this in ...

The mobile-responsive dropdown navigation bar functions well on browsers with small widths, but does not work properly on my phone

I am experiencing an issue with the mobile responsive dropdown navigation bar on my website. It works perfectly fine on a small width browser, but when I try to open it on my phone, nothing happens. This is puzzling me as I am new to making websites respon ...