Странная ссылка [как программно эмулировать клик мышкой?]

Вопрос-ответ JavaScript
1

Скажите а можно ли повесить javascript (или CSS) на элемент div и превратить его в ссылку? Пример: Стул Special4You Vital Black (26512909) купить в Киеве, цена, фото и отзывы — Kupistul.ua Ссылка характеристики. Не могу понять как она сделана и как к ней достучаться. Как на нее программно нажать?

2

Можно. Стилями и js. Стилями формируется
cursor: pointer
поведение по hover.

Js-ом описывается поведение при нажатии. То что это не реальная ссылка видно по тому, что отображается внизу в статусе состояния по наведению. Попробуйте навести на логотип и видно чем отличается.

3

Это не будет превращением в ссылку, но да можно навесить обработчик на div и навигациировать браузер при клике. Как-то так будет выглядеть код:

document.querySelector('div').addEventListener('click', () => {
	location.href = 'https://google.com'
})

Но ссылки имеют куда более широкий фукнционал от поведения при дран-н-дроп до поведения с зажатыми кнопками-модификаторами которые к тому же разные на разных операционных системах. Чтобы его повторить нужно написать приличное количество кода и лучше не ввязываться в историю если не уверен что понимаешь задачу эмуляции ссылок целиком.

Это не ссылка. Это div со стилями которы меняют вид курсора при наведении. Клик по диву обрабатывается программно.

Нажать на элемент (любой не только ссылку) можно сэмулировав событие мышки. Я в свое время использовал вот такую функцию. Ниже полный код который триггернет клик по табу с Ссылка характеристики.

function simulate_mouse_events (node, mouseEvent) {
	var options,
		oEvent;

	options = {
		pointerX: 0,
		pointerY: 0,
		clientX : 0,
		clientY : 0,
		button: 0,
		ctrlKey: false,
		altKey: false,
		shiftKey: false,
		metaKey: false,
		bubbles: true,
		cancelable: true
	};

	if (document.createEvent) {
		oEvent = document.createEvent('MouseEvents');
		oEvent.initMouseEvent(mouseEvent, options.bubbles, options.cancelable, document.defaultView, options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY, options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, node);
		node.dispatchEvent(oEvent);
	} else {
		var msEvent = document.createEventObject();
		for (var eventPropName in options) {
			msEvent[eventPropName] = options[eventPropName];
		}
		node.fireEvent('on' + mouseEvent, msEvent);
	}
}

simulate_mouse_events(document.querySelectorAll('.product-bottom__tabs-button')[1], 'click')
1 лайк